Javascript 将鼠标悬停在flot中的点上时显示自定义工具提示

从这个例子中，我知道如何创建一个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. */ };

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

这里是一个我突然提出的粗略建议。不确定它是否按照您喜欢的方式运行，但可能会激发一个想法

[更新]

您将要绑定到

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

用于单击事件的事件

[update2]

我已经调整了示例，以使用您的测试数据，并更多地使用您上面描述的内容。至于

项

对象，它似乎是动态生成的，因此，据我所知，您不能向它添加额外的数据。但是，您可以创建一个数组，以在单击时缓存

项

对象，并向其添加其他数据，并将其用于

悬停

事件

这个新的示例就是这样做的，它在没有单击任何内容时显示正常的工具提示。但单击后，它会确定单击的点是第一个点还是第二个点，并向名为

alternateText

的

item

对象添加一个addition属性，并将其存储在名为

itemsClicked

的数组中

现在，当一个点悬停在它上面时，检查数组中是否有缓存的

项

对象，该对象基于当前

项

对象的相同索引，该索引通过

项.dataIndex

获得。如果缓存数组

itemsClicked

中有匹配索引，它将从中获取

项

对象，并使用先前在

单击

事件期间添加的

alternateText

属性

第一个点的

项

对象如下所示：

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

单击后，它将如下所示，并存储在

itemslicked

数组中：

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

您只需将数据添加到数据数组中，即可将数据添加到序列中

而不是

$.plot(element, [[1, 2], [2, 4]] ...)

你可以

$.plot(element, [[1, 2, "label"], [2, 4, "another label"]] ...)

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

有关完整示例，请参见此小提琴：

$（函数（）{
var sin=[]，
cos=[]；
对于（var i=0；i<14；i+=0.5）{
sin.push（[i，Math.sin（i），'some custom label'+i]）；
cos.push（[i，Math.cos（i），'other custom label'+i]）；
}
变量绘图=$.plot（$（“#占位符”）[{
资料来源：sin，
标签：“罪（x）”
},
{
数据：cos，
标签：“cos（x）”
}
], {
系列：{
线路：{
秀：真的
},
要点：{
秀：真的
}
},
网格：{
悬停：是的，
可点击：正确
},
亚克斯：{
最小值：-1.2，
最高：1.2
}
});
$（“#占位符”）.bind（“plothover”，函数（事件、位置、项目）{
$（“#工具提示”）.remove（）；
如果（项目）{
var tooltip=item.series.data[item.dataIndex][2]；
$（''+工具提示+''）
.css({
位置：'绝对'，
显示：“无”，
顶部：item.pageY+5，
左：item.pageX+5，
边框：“1px实心#fdd”，
填充：“2px”，
“背景色”：“费用”，
不透明度：0.80
})
.appendTo（“body”）.fadeIn（200）；
显示工具提示（item.pageX、item.pageY、工具提示）；
}
});
});
您还可以尝试以下代码：


函数显示工具提示（x、y、内容、z）{
$（''+内容+''）.css({
位置：'绝对'，
显示：“无”，
排名：y-30，
左：x-110，
“字体大小”：“粗体”，
边框：“1px实心rgb（255、221、221）”，
填充：“2px”，
“背景色”：z，
不透明度：“0.8”
}).appendTo（“body”）.show（）；
};
$（文件）。准备好了吗(
$（函数（）{
风险值数据=[{
“标签”：“斯科特”，
“数据”：[
[1317427200000 - 5000000 * 3, "17017"],
[1317513600000 - 5000000 * 5, "77260"]
]
},
{
“标签”：“马丁”，
“数据”：[
[1317427200000 - 5000000 * 2, "96113"],
[1317513600000 - 5000000 * 4, "33407"]
]
},
{
“标签”：“solonio”，
“数据”：[
[1317427200000 - 5000000, "13041"],
[1317513600000 - 5000000 * 3, "82943"]
]
},
{
“标签”：“swarowsky”，
“数据”：[
[1317427200000, "83479"],
[1317513600000 - 5000000 * 2, "96357"],
[1317600000000 - 5000000, "55431"]
]
},
{
“标签”：“猫王”，
“数据”：[
[1317427200000 + 5000000, "40114"],
[1317513600000 - 5000000 * 1, "47065"]
]
},
{
“标签”：“艾伦”，
“数据”：[
[1317427200000 + 5000000 * 2, "82504"],
[1317513600000, "46577"]
]
},
{
“标签”：“托尼”，
“数据”：[
[1317513600000 + 5000000, "88967"]
]
},
{
“标签”：“账单”，
“数据”：[
[1317513600000 + 5000000 * 2, "60187"],
[1317600000000, "39090"]
]
},
{
“标签”：“tim”，
“数据”：[
[1317513600000 + 5000000 * 3, "95382"],
[1317600000000 + 5000000, "89699"]
]
},
{
“标签”：“布兰妮”，
“数据”：[
[1317513600000 + 5000000 * 4, "76772"]
]
},
{
“标签”：“logan”，
“数据”：[