顯示自定義工具提示，當懸停在一個點flot

Question

從示例here，我知道如何創建一個Flot圖形，顯示懸停時的工具提示。但是這些示例僅顯示如何顯示包含x值，y值，標籤等的工具提示，並且我無法弄清楚如何創建更多自定義工具提示。

有什麼地方可以附加自定義數據，我可以在創建工具提示時訪問嗎？

例如，爲了簡化，假設我的代碼如下所示：

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

現在，第一個數據點一下的時候，我想的工具提示顯示「你好」，並在第二數據點，當點擊我想要顯示「再見」。我該怎麼做呢？當綁定plothover事件

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

我不確定什麼「項目」是指，以及如何將數據附加到它。

Answer 1

這是一個粗糙的JSFiddle example，我鞭打。不知道它的運作完全按照你喜歡，但有可能引發一個想法......

[更新]

你要綁定到

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

事件點擊事件

[UPDATE2]Updated Example

I」已經調整了示例以使用您的測試數據，並更多地使用上面描述的內容。至於item對象，它似乎是在運行中生成的，因此，從我所知道的情況來看，您無法向其添加其他數據。但是，您可以創建一個陣列以在單擊時緩存item對象，並向其添加其他數據並將它們用於hover事件。

這個新的例子就是這麼做的，它顯示了沒有任何東西被點擊時的正常工具提示。但是一旦點擊，它將確定點擊的點是第一個還是第二個點，並向item對象添加一個附加屬性，並將其存儲在名爲itemsClicked的數組中。

現在，當一個點被懸空時，它會根據當前item對象的相同索引來檢查陣列中是否存在緩存的item對象，該對象是通過item.dataIndex獲取的。如果緩存陣列itemsClicked中有匹配的索引，它將從中抓取item對象，並使用之前在click事件期間添加的alternateText屬性。

第一點的item對象會是這個樣子：

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

點擊後則是這樣的，並存儲在itemsClicked數組中：

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 
} 

請讓我知道如果任何這是有幫助與否，如果不是，我會閉嘴，並停止更新我的答案：P

Answer 2

您可以添加數據到系列簡單通過將它添加到數據數組中。

而不是

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

可以

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

，然後使用該信息來顯示自定義標籤。

一個完整的例子來看看這個小提琴： http://jsfiddle.net/UtcBK/328/

Answer 3

您也可以嘗試下面的代碼：

HTML體：

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

腳本：

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