我有一个jQuery Flot折线图。我以前没有使用过JQuery Flot Charts，并且对JQuery Flot Charts经验很少。我环顾四周，在其他地方找不到答案。
JQuery Flot折线图的数据数组如下：
var twitter = [[1, 27], [2, 34], [3, 51]]
当用户将鼠标悬停在折线图中的每个数据点上时，将向用户显示一个工具提示。工具提示当前显示以下内容：
工具提示示例，数据点一> Twitter：| X：1 | y：27.00
我可以看到，这是在“变量选项”中控制的：
var options = {
grid : {
hoverable : true
},
colors : ["#568A89", "#3276B1"],
tooltip : true,
tooltipOpts : {
**//content : "Value <b>$x</b> Value <span>$y</span>",**
现在，我的每个数据数组都显示不同的数据点。例如：
数据数组一：显示用户配置文件视图的数量
数据数组二：显示用户点数
数据数组三：显示好友数
现在，当用户将这些数据点中的每一个悬停时，用户需要能够看到每个数据点的相关内容。
例如：
当用户将鼠标悬停在> Data Array One上时：[1，27]
工具提示需要显示> 27个配置文件视图
当用户将鼠标悬停在>数据数组2上时：[2，34]
工具提示需要显示> 34个用户点
如何自定义工具提示显示的内容？
如何为每个单独的数据数组提供不同的工具提示内容？
感谢您对这个问题的帮助和支持。
最佳答案
目前尚不清楚如何获得每个工具提示的显示，但在此示例中，它是静态的。这样的事情应该起作用。小提琴在这里-Example
var tickVals = [[1,"Profile Views"],[2,"User Points"],[3,"Number of Friends"]]
var dataLines = [
{
label: "Twitter",
data: [[1, 27], [2, 34], [3, 51]],
}
];
$.plot($("#placeholder"), dataLines, {
grid: {
hoverable: true,
mouseActiveRadius: 10
},
lines: {show: true},
points: {
show: true,
radius: 4
},
});
function showTooltip(x, y, contents) {
$('<div id="tooltip">' + contents + '</div>').css({
position: 'absolute',
display: 'none',
top: y - 40,
left: x - 10,
border: '1px solid #fdd',
padding: '2px',
'background-color': '#eee',
opacity: 0.80
}).appendTo("body").fadeIn(200);
}
var previousPoint = null;
$("#placeholder").on("plothover", function(event, pos, item) {
$("#x").text(pos.x.toFixed(2));
$("#y").text(pos.y.toFixed(2));
if (item) {
if (previousPoint != item.dataIndex) {
previousPoint = item.dataIndex;
$("#tooltip").remove();
var x = item.datapoint[0]-1,
y = item.datapoint[1];
showTooltip(item.pageX, item.pageY,
tickVals[x][1] + "- " + y);
}
}
else {
$("#tooltip").remove();
previousPoint = null;
}
});