anzeigen von benutzerdefinierten tooltip, wenn die Maus über einen Punkt in der flot

Vom Beispiel hier, ich Art von wissen, wie Sie eine Flot Diagramm mit tooltips, wenn die Maus. Aber die Beispiele zeigen nur auf, wie man tooltips mit dem x-Wert, y-Wert, label, etc., und ich kann nicht herausfinden, wie man erstellen Sie mehrere benutzerdefinierte tooltips.

Gibt es irgendwo kann ich anfügen benutzerdefinierte Daten, auf die ich zugreifen kann, die beim erstellen der tooltip?

Zum Beispiel zu vereinfachen, nehmen wir an, mein code sieht wie folgt aus:

var d = [ { label: "Fake!", data: [ [1290802154, 0.3], [1292502155, 0.1] ] } ];
var options = {
    xaxis: { mode: "time" },
    series: {
    lines: { show: true },
        points: { show: true }
    },
    grid: { hoverable: true, clickable: true }
};
$.plot($("#placeholder"), d, options);

Nun, wenn Sie auf den ersten Datenpunkt, möchte ich den tooltip zu zeigen, "Hallo", und beim Klick auf den zweiten Datenpunkt-ich will zeigen, "Bye". Wie mache ich das? Bei der Bindung der plothover Veranstaltung

$(".placeholder").bind("plothover", function (event, pos, item) { /* etc. */ };

Ich bin mir nicht sicher, was "Sache" bezieht, und so fügen Sie Daten zu es.

InformationsquelleAutor grautur | 2010-12-03

flot javascript

8

Hier eine grobe JSFiddle-Beispiel, dass ich peitschte. Nicht sicher, ob es funktionieren genau, wie du möchtest, aber könnten Funken eine Idee...

[update]

werden Sie wollen, zu binden, um die
```
$("#placeholder").bind("plotclick", function (event, pos, item) {/* code */});
```
Ereignis für das klicken auf Ereignisse

[update2] Aktualisiertes Beispiel

Ich hab eingestellt das Beispiel verwenden Sie Ihre test-Daten und arbeiten mehr mit dem, was Sie beschrieben haben. Für die item Objekt es scheint, dass es generiert " on the fly also, was ich sagen kann, Sie können nicht fügen Sie zusätzliche Daten ein. Sie können jedoch erstellen ein array zum Zwischenspeichern der item Objekte, die, wenn geklickt wird, und fügen Sie weitere Daten, um Sie und verwenden Sie Sie für die hover Veranstaltung.

Dieses neue Beispiel macht genau das, es zeigt die normalen tooltip, wenn nichts geklickt wird. aber sobald es angeklickt wird bestimmt, ob der Punkt angeklickt wurde, die erste oder die zweite und fügt einen Zusatz-Eigenschaft, um die item Objekt namens alternateText und speichert es in einem array mit dem Namen itemsClicked.

Nun, wenn ein Punkt schwebte über prüft, um zu sehen, ob es ein zwischengespeichertes item Objekt innerhalb des Arrays basieren auf den gleichen index der aktuellen item Objekt, das man über item.dataIndex. Wenn es einen entsprechenden index in den cache-array itemsClicked es wird greifen die item - Objekt aus und verwenden Sie die alternateText Eigenschaft Hinzugefügt wurde, während die click Ereignis zuvor.

Der erste Punkt ist item Objekt würde in etwa so Aussehen:
```
item : {
    dataIndex: 0,
    datapoint: [
        1290802154,
        0.3
    ],
    pageX: 38,
    pageY: 82,
    series: {/* properties of the series that this point is in */},
    seriesIndex: 0
}
```
Einmal geklickt, es würde dann so Aussehen und gespeichert werden, in der itemsClicked array:
```
item : {
    alternateText: 'hello',
    dataIndex: 0,
    datapoint: [
        1290802154,
        0.3
    ],
    pageX: 38,
    pageY: 82,
    series: {/* properties of the series that this point is in */},
    seriesIndex: 0
}
```
Bitte lassen Sie mich wissen, ob dies hilfreich ist oder nicht, wenn nicht werde ich still und stoppen die Aktualisierung meiner Antwort 😛

und hier ist ein update, das komplett überschreibt die Daten in der QuickInfo: jsfiddle.net/subhaze/UtcBK/3

InformationsquelleAutor subhaze
13

Können Sie Daten hinzufügen, um die Serie einfach, indem Sie das Daten-array.

Statt
```
$.plot(element, [[1, 2], [2, 4]] ...)
```
Können Sie
```
$.plot(element, [[1, 2, "label"], [2, 4, "another label"]] ...)
```
Und dann diese Informationen verwenden, um zu zeigen, ein benutzerdefiniertes Etikett.

Sehen, diese Geige für ein vollständiges Beispiel:
http://jsfiddle.net/UtcBK/328/

InformationsquelleAutor Lasse Skindstad Ebert

Sie können auch versuchen folgenden code:

HTML-body:

<div id="content">
    <div class="demo-container">
        <div id="placeholder" class="demo-placeholder"></div>
    </div>
</div>

Skript:

<script type="text/javascript">
    function showTooltip(x, y, contents, z) {
        $('<div id="tooltip">' + contents + '</div>').css({
            position: 'absolute',
            display: 'none',
            top: y - 30,
            left: x - 110,
            'font-weight':'bold',
            border: '1px solid rgb(255, 221, 221)',
            padding: '2px',
            'background-color': z,
            opacity: '0.8'
     }).appendTo("body").show();
     };

    $(document).ready(
                 $(function () {
                     var data = [{
                         "label": "scott",
                         "data": [[1317427200000 - 5000000 * 3, "17017"], [1317513600000 - 5000000 * 5, "77260"]]
                     },
        {
            "label": "martin",
            "data": [[1317427200000 - 5000000 * 2, "96113"], [1317513600000 - 5000000 * 4, "33407"]]
        },
        {
            "label": "solonio",
            "data": [[1317427200000 - 5000000, "13041"], [1317513600000 - 5000000 * 3, "82943"]]
        },
        {
            "label": "swarowsky",
            "data": [[1317427200000, "83479"], [1317513600000 - 5000000 * 2, "96357"], [1317600000000 - 5000000, "55431"]]
        },
        {
            "label": "elvis",
            "data": [[1317427200000 + 5000000, "40114"], [1317513600000 - 5000000 * 1, "47065"]]
        },
        {
            "label": "alan",
            "data": [[1317427200000 + 5000000 * 2, "82504"], [1317513600000, "46577"]]
        },
        {
            "label": "tony",
            "data": [[1317513600000 + 5000000, "88967"]]
        },
        {
            "label": "bill",
            "data": [[1317513600000 + 5000000 * 2, "60187"], [1317600000000, "39090"]]
        },
        {
            "label": "tim",
            "data": [[1317513600000 + 5000000 * 3, "95382"], [1317600000000 + 5000000, "89699"]]
        },
        {
            "label": "britney",
            "data": [[1317513600000 + 5000000 * 4, "76772"]]
        },
        {
            "label": "logan",
            "data": [[1317513600000 + 5000000 * 5, "88674"]]
        }];

                     var options = {
                         series: {
                             bars: {
                                 show: true,
                                 barWidth: 60 * 60 * 1000,
                                 align: 'center'
                             }
                         },
                         points: {
                             show: true
                         },
                         lines: {
                             show: true
                         },
                         grid: { hoverable: true, clickable: true },
                         yaxes: {
                             min: 0
                         },
                         xaxis: {
                             mode: 'time',
                             timeformat: "%b %d",
                             minTickSize: [1, "month"],
                             tickSize: [1, "day"],
                             autoscaleMargin: .10
                         }
                     };

                     $(function () {
                         $.plot($('#placeholder'), data, options);
                     });
                     $(function () {
                         var previousPoint = null;
                         $("#placeholder").bind("plothover", function (event, pos, item) {
                             if (item) {
                                 if (previousPoint != item.datapoint) {
                                     previousPoint = item.datapoint;

                                     $("#tooltip").remove();
                                     var x = item.datapoint[0],
                    y = item.datapoint[1] - item.datapoint[2];
                                     debugger;
                                     showTooltip(item.pageX, item.pageY, y + " " + item.series.label, item.series.color);
                                 }
                             }
                             else {
                                 $("#tooltip").remove();
                                 previousPoint = null;
                             }
                         })
                     });
                 })
                 );
</script>

InformationsquelleAutor Amol M Kulkarni

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.