我有一个包含两个数据集的简单散点图:* 主动 * 和 * 被动 *:
const data = {
"datasets": [{
"label": "Active",
"sentences": [
"A1",
"A2",
"A3"
],
"data": [
[
"0.4340433805869016",
"0.12813240157479788"
],
[
"-0.39983629799199083",
"0.12125799115087213"
],
[
"-0.04289228113339527",
"0.10106119377169194"
]
],
"borderColor": "#43a047",
"backgroundColor": "#7cb342"
},
{
"label": "Passive",
"sentences": [
"P1",
"P2",
"P3"
],
"data": [
[
"0.4295487808020268",
"0.19271652809947026"
],
[
"-0.4438451670978469",
"-0.08848766134414247"
],
[
"-0.10789534989054622",
"0.08013654263956245"
]
],
"borderColor": "#1e88e5",
"backgroundColor": "#039be5"
}
],
"labels": []
};
new Chart(document.getElementById("sentences"), {
type: "scatter",
data: data,
options: {
responsive: true,
plugins: {
legend: {
position: "top",
},
tooltip: {
callbacks: {
label: ctx => ctx.dataset.sentences[ctx.dataIndex]
}
}
}
}
});
(https://jsfiddle.net/br5dhpwx/)(英文)
目前,这一渲染效果很好:
但是,我想在鼠标悬停时在相应的数据点之间画一条线。即A1-P1、A2-P2、A3-P3等。
它应该看起来像这样:
I tried to use the setHoverStyle
event,但到目前为止,还没有成功。
1条答案
按热度按时间gab6jxml1#
您可以为此使用自定义插件:
第一个
编辑:
由于某种原因,创建中的堆栈片段可以工作,但本身并不像这样,所以这里有一个小提琴链接:https://jsfiddle.net/Leelenaleee/btux41dz/