如何解决ChartJS - 移动垂直线显示在工具提示顶部
你好
我已经按照这篇文章 (Moving vertical line when hovering over the chart using chart.js) 在我的图表上画了一条垂直线。
使用单个数据集，它工作得很好。
但对于多个数据集显示（y 轴上有堆叠选项），垂直线绘制在图表的工具提示上。
设置图表工具提示的 z-index 和垂直线都不能解决我的问题。因为我找不到任何属性来做到这一点。
您有解决此问题的想法/建议吗？
我使用 react-chart-js 2 和 chart-js ^2.9.4 作为对等依赖项。
解决方法
您可以使用自定义插件在绘制所有数据集之后但在绘制工具提示之前进行绘制：
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
},{
label: '# of Points',data: [7,11,8,7],borderWidth: 1
}
]
},options: {
scales: {
yAxes: [{
stacked: true
}]
},plugins: {
customLine: {
width: 5,color: 'pink'
}
}
},plugins: [{
id: 'customLine',afterDatasetsDraw: (chart,x,opts) => {
const width = opts.width || 1;
const color = opts.color || 'black'
if (!chart.active || chart.active.length === 0) {
return;
}
const {
chartArea: {
top,bottom
}
} = chart;
const xValue = chart.active[0]._model.x
ctx.lineWidth = width;
ctx.strokeStyle = color;
ctx.beginPath();
ctx.moveTo(xValue,top);
ctx.lineTo(xValue,bottom);
ctx.stroke();
}
}]
}
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/2.9.4/Chart.js"></script>
</body>版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。