Javascript ChartJS：悬停时在两个数据点之间绘制线

大家好，我已经创建了如图所示的图表

当试图悬停在任一数据（红线）上时，是否有人知道如何在相同索引的数据集之间划一条线

我在VueJS组件上使用ChartJS

提供了一系列钩子，可用于执行自定义代码。您可以使用直接在

画布上绘制线

在下面的代码片段中，我使用了
afterDraw
钩子并画了一条线，以防工具提示出现其他情况。请查阅
vue chart.js
文档，了解如何在
vue.js
中添加此类内联插件


var图表=新图表（'canvas'{
键入：“行”，
插件：[{
后置绘图：图表=>{
if（chart.tooltip.\u活动&&chart.tooltip.\u活动.length）{
const ctx=chart.ctx；
ctx.save（）；
const activePoint=chart.tooltip.\u active[0]；
const x=activePoint.tooltipPosition（）.x；
常数yAxis=图表刻度['y轴-0']；
常量值1=chart.data.dataset[0]。数据[activePoint.\u index]；
const value2=chart.data.dataset[1]。data[activePoint.\u index]；
常数y1=yAxis.getPixelForValue（值1）；
常数y2=yAxis.getPixelForValue（值2）；
ctx.beginPath（）；
ctx.moveTo（x，y1）；
ctx.lineTo（x，y2）；
ctx.lineWidth=2；
ctx.strokeStyle='绿色'；
ctx.stroke（）；
ctx.restore（）；
}
}
}],
数据：{
标签：['A'，'B'，'C'，'D'，'E'，'F']，
数据集：[{
数据：[13,10,12,13,9,12]，
背景颜色：“rgba（255,99,132,0.2）”，
边框颜色：“rgb（255，99，132）”，
填充：假
},
{
数据：[10,7,9,10,6,9]，
背景颜色：“rgba（255、159、64、0.2）”，
边框颜色：“rgb（255、159、64）”
}
]
},
选项：{
图例：{
显示：假
},
工具提示：{
已启用：false
},
比例：{
雅克斯：[{
滴答声：{
贝吉纳泽罗：是的
}
}]
}
}
});