显示自定义工具提示，当悬停在一个点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>