Chart.js Chartjs-Y轴上两点之间的直线

目标是用一条线连接两个点。 Dots的数据来自两个不同的阵列

这里有一个图像帮助理解

---

您可以为此使用自定义插件：

const customLine={
id:'自定义行'，
beforeDatasetsDraw：（图表、参数、选项）=>{
常数{
ctx，
比例：{
x,，
Y
}
}=图表；
chart.data.dataset[0].data.forEach（（数据点，i）=>{
ctx.strokeStyle=options.lineColor | | |“黑色”；
ctx.lineWidth=options.lineWidth | | 1；
ctx.beginPath（）；
ctx.moveTo（x.getPixelForValue（chart.data.labels[i]），y.getPixelForValue（dataPoint））；
ctx.lineTo（x.getPixelForValue（chart.data.labels[i]），y.getPixelForValue（chart.data.datasets[1].data[i]）；
ctx.stroke（）；
})
}
}
变量选项={
键入：“行”，
数据：{
标签：[“红色”、“蓝色”、“黄色”、“绿色”、“紫色”、“橙色”]，
数据集：[{
标签：“#投票数”，
数据：[12,19,3,5,2,3]，
边框宽度：1，
展示线：错，
背景颜色：“红色”
},
{
标签：“#个点”，
数据：[7,11,5,8,3,7]，
边框宽度：1，
展示线：错，
背景颜色：“蓝色”
}
]
},
选项：{
插件：{
海关热线：{
lineColor:'粉红色'，
线宽：3
}
}
},
插件：[自定义行]
}
var ctx=document.getElementById（'chartJSContainer'）.getContext（'2d'）；
新图表（ctx，选项）