ChartJS - 移动垂直线显示在工具提示顶部
[英]ChartJS - Moving vertical line is display on top of tooltip
问题描述
Hello,
你好，
I've followed this post ( Moving vertical line when hovering over the chart using chart.js ) to draw a vertical line on my chart.我已经按照这篇文章（ 使用 chart.js 悬停在图表上时移动垂直线）在我的图表上绘制一条垂直线。
With a single dataset, it's working just fine.使用单个数据集，它工作得很好。
But for a multiple datasets display (with stacked options on the y-axis), the vertical line is drawn over the chart's tooltip.但是对于多个数据集显示（y 轴上有堆叠选项），垂直线绘制在图表的工具提示上。
Neither setting the z-index of the chart's tooltip nor the vertical line could solve my problem.设置图表工具提示的 z-index 和垂直线都不能解决我的问题。 Since I can't find any property to do that.因为我找不到任何财产来做到这一点。
Do you have any idea/suggestion to solve this issue?你有什么想法/建议来解决这个问题吗？
I'm using react-chart-js 2 with chart-js ^2.9.4 as a peer dependency.我正在使用 react-chart-js 2 和 chart-js ^2.9.4 作为对等依赖项。
1 个解决方案
解决方案1
1 已采纳 2021-07-28 14:38:56
You can use a custom plugin that draws after all the datasets have drawn but before the tooltip is drawn:您可以使用自定义插件在绘制所有数据集之后但在绘制工具提示之前进行绘制：
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, 5, 8, 3, 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.