jQuery flot将文本与绘图点相关联

2023年8月26日 185次阅读

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

我使用了以下示例

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

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

最佳答案 我可能太迟回答了这个问题.据我所知,你试图显示一些关于该点的文字,而不仅仅是那个点的x,y坐标.我能够自己解决它,并在你给出的链接
http://people.iola.dk/olau/flot/examples/interacting.html中找到了线索.如果你看一下代码,在与plotclick事件绑定的函数中,有这个变量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;
点赞