javascript - 将鼠标悬停在 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);

现在，当单击第一个数据点时，我希望工具提示显示“Hello”，而当单击第二个数据点时，我希望显示“Bye”。我该怎么做呢？绑定(bind)plothover事件时

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

我不确定“项目”指的是什么，以及如何将数据附加到它。

Answer 1

您只需将数据添加到数据数组即可将数据添加到系列。

代替

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

你可以

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

然后使用该信息显示自定义标签。

有关完整示例，请参阅此 fiddle : http://jsfiddle.net/UtcBK/328/

$(function() {
  var sin = [],
    cos = [];
  for (var i = 0; i < 14; i += 0.5) {
    sin.push([i, Math.sin(i), 'some custom label ' + i]);
    cos.push([i, Math.cos(i), 'another custom label ' + i]);
  }

  var plot = $.plot($("#placeholder"), [{
      data: sin,
      label: "sin(x)"
    },
    {
      data: cos,
      label: "cos(x)"
    }
  ], {
    series: {
      lines: {
        show: true
      },
      points: {
        show: true
      }
    },
    grid: {
      hoverable: true,
      clickable: true
    },
    yaxis: {
      min: -1.2,
      max: 1.2
    }
  });

  $("#placeholder").bind("plothover", function(event, pos, item) {
    $("#tooltip").remove();
    if (item) {
      var tooltip = item.series.data[item.dataIndex][2];

      $('<div id="tooltip">' + tooltip + '</div>')
        .css({
          position: 'absolute',
          display: 'none',
          top: item.pageY + 5,
          left: item.pageX + 5,
          border: '1px solid #fdd',
          padding: '2px',
          'background-color': '#fee',
          opacity: 0.80
        })
        .appendTo("body").fadeIn(200);


      showTooltip(item.pageX, item.pageY, tooltip);
    }
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://people.iola.dk/olau/flot/jquery.flot.js"></script>
<div id="placeholder" style="width:600px;height:300px"></div>