jQuery flot 将文本与绘图点关联起来

Question

我正在使用 Flot，并且希望将文本与每个单独的绘图点相关联，以便当我将鼠标悬停在绘图点上时，会显示相关数据。

我使用了以下示例

http://people.iola.dk/olau/flot/examples/interacting.html

这允许我显示工具提示，但我需要将文本与每个绘图点相关联。

Answer 1

我可能回答这个问题已经太晚了。据我了解这个问题，您正在尝试显示有关该点的一些文本，而不仅仅是该点的 x,y 坐标。我能够自己解决这个问题，并在您提供的链接中找到了线索 http://people.iola.dk/olau/flot/examples/interacting.html 。如果你看一下代码，在plotclick事件绑定(bind)的函数中，有这个变量item.dataIndex:

$("#clickdata").text("You clicked point " + item.dataIndex + " in " + item.series.label + ".");

该变量是图中点的一种 ID。因此，如果我创建一个包含三个参数(x 坐标、y 坐标和信息)的数组，并按以下方式将前两个坐标传递给绘图函数:

var data = [];
for(i=0;i<len;i++)
  data.push([obj[i][1], obj[i][0]]);
//plotting the new array "data"
var plot = $.plot($("#placeholder"), [data], options);

obj 数组在哪里:

{{12, 20, "info about point 1"},{26, 30, "info about point 2"}}

那么plothover事件函数中的以下语句将为我们完成这项工作

showTooltip(item.pageX, item.pageY,obj[item.dataIndex][2]);

这对我有用。希望能帮助到你。 :)

注意:

您可能还会发现直接引用文本很方便，而不必保留对 obj 数组的引用:

var myLabel = this.plot.getData()[item.seriesIndex].data[item.dataIndex][2]
showTooltip(item.pageX, item.pageY, myLabel;