将鼠标悬停在flot中的某个点上时显示自定义工具提示 [英] displaying custom tooltip when hovering over a point in flot

问题描述

从示例此处，我知道如何创建一个Flot图，显示悬停时的工具提示。但这些示例仅显示如何显示包含x值，y值，标签等的工具提示，我无法弄清楚如何创建更多自定义工具提示。

<有没有我可以附加自定义数据的地方，我可以在创建工具提示时访问？

例如，为了简化，让我们假设我的代码如下：

  var d = [{label：假！，数据：[[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，以及何时点击第二个数据点，我想显示再见。我该怎么做呢？绑定plothover事件时

  $（。placeholder）。bind（plothover，function（event，pos，item） ）{/ *等* /}; 
  

我不确定item是指什么，以及如何将数据附加到它。

解决方案

这是一个粗略的 JSFiddle示例。不确定它是否正常运行，但可能引发一个想法......

[更新]

你想要绑定到

  $（＃placeholder）。bind（plotclick，function（event，pos，item）{/ * code * /}）; 
  

点击活动的事件

[update2] 更新示例

我已调整示例以使用您的测试数据并使用上述内容更多地工作。至于项目 obje ct它似乎是动态生成的，所以从我所知道的，你无法向它添加额外的数据。但是，您可以创建一个数组来在单击时缓存项对象并向其添加其他数据并将其用于 hover 事件。

这个新例子就是这样，它显示了没有点击任何内容时的正常工具提示。但是一旦点击它确定点击的点是第一个还是第二个，并将附加属性添加到名为 alternateText的 item 对象并将其存储在名为 itemsClicked 的数组中。

现在，当一个点悬停在它上面时，它会检查基于数组的缓存 item 对象是否存在在当前 item 对象的相同索引上，该对象通过 item.dataIndex 获得。如果缓存数组中有匹配的索引 itemsClicked ，它将从中获取 item 对象并使用 alternateText 之前在点击事件期间添加的属性。

第一个点的 item 对象看起来像这样：

  item： {
 dataIndex：0，
 datapoint：[
 1290802154，
 0.3 
]，
 pageX：38，
 pageY：82，
系列：此点的系列的{/ *属性为* /}，
 seriesIndex：0 
} 
  

点击后，它会如下所示并存储在 itemsClicked 数组中：

  item：{
 alternateText：'hello'，
 dataIndex：0，
 datapoint：[
 1290802154，
 0.3 
]，
 pageX：38，
 pageY：82，
系列：{/ *该系列的属性他的观点是* /}，
 seriesIndex：0 
} 
  

请让我知道这是否有帮助，如果不是，我会闭嘴并停止更新我的答案：P

From the example here, I kind of know how to create a Flot graph that shows tooltips when hovering. But the examples only show to how to display tooltips containing the x value, y value, label, etc., and I can't figure out how to create more customized tooltips.

Is there someplace I can attach custom data, that I can access when creating the tooltip?

For example, to simplify, let's suppose my code looks like:

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

Now, when clicking on the first datapoint, I want the tooltip to show "Hello", and when clicking on the second datapoint I want to show "Bye". How do I do this? When binding the plothover event

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

I'm not sure what "item" refers to, and how to attach data to it.

解决方案

Here is a rough JSFiddle example that I whipped up. Not sure if it's functioning exactly how you like but might spark an idea...

[update]

you'll want to bind to the

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

event for clicking events

[update2] Updated Example

I've adjusted the example to use your test data and to work more with what you have described above. As for the item object it seems that it is generated on the fly so, from what I can tell, you can not add additional data to it. However, you can create an array to cache the item objects when clicked and add additional data to them and use them for the hover event.

This new example does just that, it shows the normal tooltip when nothing is clicked. but once clicked it determines if the point clicked was the first or second and adds an addition property to the item object called alternateText and stores it in an array called itemsClicked.

Now when a point is hovered over it checks to see if there is a cached item object within the array based on the same index of the current item object, which is obtained via item.dataIndex. If there is a matching index in the cache array itemsClicked it will grab the item object from it and use the alternateText property that was added during the click event earlier.

The first point's item object would look something like this:

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

Once clicked it would then look like this and be stored in the itemsClicked array:

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
}

Please let me know if any of this is helpful or not, if not I'll shut up and stop updating my answer :P

这篇关于将鼠标悬停在flot中的某个点上时显示自定义工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！