大佬教程收集整理的这篇文章主要介绍了Chartjs - Y 轴上两点之间的线，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
const customLine = {
id: 'customLine',beforeDatasetsDraw: (chart,args,options) => {
const {
ctx,scales: {
x,y
}
} = chart;
chart.data.datasets[0].data.forEach((dataPoint,i) => {
ctx.strokeStyle = options.lineColor || 'black';
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();
})
}
}
var options = {
type: 'line',data: {
labels: ["Red","Blue","Yellow","Green","Purple","Orange"],datasets: [{
label: '# of Votes',data: [12,19,3,5,2,3],borderWidth: 1,showLine: false,BACkgroundColor: 'red'
},{
label: '# of Points',data: [7,11,8,7],BACkgroundColor: 'blue'
}
]
},options: {
plugins: {
customLine: {
lineColor: 'pink',lineWidth: 3
}
}
},plugins: [customLine]
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx,options);<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudFlare.com/ajax/libs/Chart.js/3.3.0/chart.js"></script>
</body>以上是大佬教程为你收集整理的Chartjs - Y 轴上两点之间的线全部内容，希望文章能够帮你解决Chartjs - Y 轴上两点之间的线所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。