Anzeige von benutzerdefinierter QuickInfo beim Schweben über einen Punkt in Flot

Question

Aus dem Beispiel here weiß ich, wie man ein Flot-Diagramm erstellt, das Tooltips beim Schweben anzeigt. Aber die Beispiele zeigen nur, wie Tooltips angezeigt werden, die den x-Wert, den y-Wert, die Beschriftung usw. enthalten, und ich kann nicht herausfinden, wie man mehr angepasste Tooltips erstellt.

Gibt es einen Ort, an den ich benutzerdefinierte Daten anhängen kann, auf die ich beim Erstellen des Tooltips zugreifen kann?

Zum Beispiel zu vereinfachen, wollen sie meinen Code annehmen, wie folgt aussieht:

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); 

Wenn nun auf dem ersten Datenpunkt klicken, ich den Tooltip will „Hallo“ zeigen, und beim Klicken auf dem zweiten Datenpunkt Ich möchte "Tschüss" zeigen. Wie mache ich das? Wenn die Bindung des plothover Ereignis

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

Ich bin mir nicht sicher, was „Element“ bezieht sich auf, und wie die Daten, um es zu befestigen.

Answer 1

Hier ist eine grobe JSFiddle example, die ich aufpeitschte. Nicht sicher, ob es funktioniert genau, wie Sie mögen, aber vielleicht eine Idee entfachen ...

[update]

Sie auf die für das Klicken Ereignisse

$("#placeholder").bind("plotclick", function (event, pos, item) {/* code */}); 

Ereignis binden möchten werde

[update2]Updated Example

I‘ Wir haben das Beispiel angepasst, um Ihre Testdaten zu verwenden und mehr mit dem zu arbeiten, was Sie oben beschrieben haben. Wie für das Objekt item scheint es, dass es im laufenden Betrieb generiert wird, so dass ich, was ich sagen kann, können Sie keine zusätzlichen Daten hinzufügen. Sie können jedoch ein Array erstellen, um die Objekte item zwischenzuspeichern, wenn Sie darauf klicken, und zusätzliche Daten hinzufügen und sie für das Ereignis verwenden.

Dieses neue Beispiel zeigt nur den normalen Tooltip, wenn nichts angeklickt wird. nach dem Klicken wird jedoch festgestellt, ob der angeklickte Punkt der erste oder der zweite Punkt ist und dem item-Objekt alternateText eine Additionseigenschaft hinzugefügt und in einem Array namens itemsClicked gespeichert wird.

Nun, wenn ein Punkt schwebte über sie überprüft, ob es einen Cache gespeichert ist item Objekt innerhalb des Arrays basiert auf dem gleichen Index des aktuellen item Objekt, das über item.dataIndex erhalten wird. Wenn im Cache-Array itemsClicked ein übereinstimmender Index vorhanden ist, wird das Objekt item daraus abgerufen und die alternateText-Eigenschaft verwendet, die zuvor während des Ereignisses click hinzugefügt wurde.

Der item Objekt erste Punktes würde wie folgt aussehen:

item : { 
    dataIndex: 0, 
    datapoint: [ 
     1290802154, 
     0.3 
    ], 
    pageX: 38, 
    pageY: 82, 
    series: {/* properties of the series that this point is in */}, 
    seriesIndex: 0 
} 

geklickt Einmal wäre es dann so aussehen und in dem itemsClicked Array gespeichert werden:

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 
} 

Sie mich bitte, wenn Irgendwelche davon sind hilfreich oder nicht, wenn nicht, halte ich den Mund und höre auf, meine Antwort zu aktualisieren: P

Answer 2

Sie können einfach Daten zur Serie hinzufügen indem Sie es zum Datenfeld hinzufügen.

Statt

$.plot(element, [[1, 2], [2, 4]] ...) 

Sie können

$.plot(element, [[1, 2, "label"], [2, 4, "another label"]] ...) 

Und dann diese Informationen verwenden, um ein benutzerdefiniertes Etikett zu zeigen.

Sehen Sie diese Geige für ein volles Beispiel: http://jsfiddle.net/UtcBK/328/

Answer 3

Auch können Sie folgenden Code versuchen:

HTML Körper:

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

Script:

<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>