将鼠标悬停在浮动点上时显示自定义工具提示

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”。我该怎么做呢？绑定 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"]] ...)

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

完整示例请参见此小提琴： 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>

Answer 2

这是我整理的粗略的JSFiddle example。不确定它是否完全按照您喜欢的方式运作，但可能会引发一个想法......

[更新]

你会想要绑定到

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

点击事件的事件

[update2] Updated Example

我已经调整了示例以使用您的测试数据并更多地使用您在上面描述的内容。至于item 对象，它似乎是动态生成的，所以据我所知，你不能向它添加额外的数据。但是，您可以创建一个数组以在单击时缓存 item 对象并向它们添加其他数据并将它们用于hover 事件。

这个新示例就是这样做的，它在没有点击任何内容时显示正常的工具提示。但是一旦单击，它会确定单击的点是第一个还是第二个，并向名为alternateText 的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 3

你也可以试试下面的代码：

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 src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script src="http://people.iola.dk/olau/flot/jquery.flot.js"></script>
<div id="content">
  <div class="demo-container">
    <div id="placeholder" class="demo-placeholder"  style="width:800px;height:600px;"></div>
  </div>
</div>