ChartJS:悬停时在两个数据点之间画线
ChartJS: Draw line between two data points on hover
大家好,我已经创建了图中所示的图表。
有谁知道当试图将鼠标悬停在任一数据(红线)上时如何在同一索引的数据集之间画一条线。
我在 VueJS 组件上使用 ChartJS
Plugin Core API offers a range of hooks that may be used for performing custom code. You can draw the line directly on the canvas
using CanvasRenderingContext2D.stroke()
.
在下面的代码片段中,我使用了 afterDraw
挂钩并画了线,以防工具提示以其他方式显示。请参阅 vue-chart.js
文档中的 addPlugin 以了解如何在 Vue.js
.
中添加此类内联插件
var chart = new Chart('canvas', {
type: 'line',
plugins: [{
afterDraw: chart => {
if (chart.tooltip._active && chart.tooltip._active.length) {
const ctx = chart.ctx;
ctx.save();
const activePoint = chart.tooltip._active[0];
const x = activePoint.tooltipPosition().x;
const yAxis = chart.scales['y-axis-0'];
const value1 = chart.data.datasets[0].data[activePoint._index];
const value2 = chart.data.datasets[1].data[activePoint._index];
const y1 = yAxis.getPixelForValue(value1);
const y2 = yAxis.getPixelForValue(value2);
ctx.beginPath();
ctx.moveTo(x, y1);
ctx.lineTo(x, y2);
ctx.lineWidth = 2;
ctx.strokeStyle = 'green';
ctx.stroke();
ctx.restore();
}
}
}],
data: {
labels: ['A', 'B', 'C', 'D', 'E', 'F'],
datasets: [{
data: [13, 10, 12, 13, 9, 12],
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgb(255, 99, 132)',
fill: false
},
{
data: [10, 7, 9, 10, 6, 9],
backgroundColor: 'rgba(255, 159, 64, 0.2)',
borderColor: 'rgb(255, 159, 64)'
}
]
},
options: {
legend: {
display: false
},
tooltips: {
enabled: false
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="canvas" height="90"></canvas>
大家好,我已经创建了图中所示的图表。
有谁知道当试图将鼠标悬停在任一数据(红线)上时如何在同一索引的数据集之间画一条线。
我在 VueJS 组件上使用 ChartJS
Plugin Core API offers a range of hooks that may be used for performing custom code. You can draw the line directly on the canvas
using CanvasRenderingContext2D.stroke()
.
在下面的代码片段中,我使用了 afterDraw
挂钩并画了线,以防工具提示以其他方式显示。请参阅 vue-chart.js
文档中的 addPlugin 以了解如何在 Vue.js
.
var chart = new Chart('canvas', {
type: 'line',
plugins: [{
afterDraw: chart => {
if (chart.tooltip._active && chart.tooltip._active.length) {
const ctx = chart.ctx;
ctx.save();
const activePoint = chart.tooltip._active[0];
const x = activePoint.tooltipPosition().x;
const yAxis = chart.scales['y-axis-0'];
const value1 = chart.data.datasets[0].data[activePoint._index];
const value2 = chart.data.datasets[1].data[activePoint._index];
const y1 = yAxis.getPixelForValue(value1);
const y2 = yAxis.getPixelForValue(value2);
ctx.beginPath();
ctx.moveTo(x, y1);
ctx.lineTo(x, y2);
ctx.lineWidth = 2;
ctx.strokeStyle = 'green';
ctx.stroke();
ctx.restore();
}
}
}],
data: {
labels: ['A', 'B', 'C', 'D', 'E', 'F'],
datasets: [{
data: [13, 10, 12, 13, 9, 12],
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgb(255, 99, 132)',
fill: false
},
{
data: [10, 7, 9, 10, 6, 9],
backgroundColor: 'rgba(255, 159, 64, 0.2)',
borderColor: 'rgb(255, 159, 64)'
}
]
},
options: {
legend: {
display: false
},
tooltips: {
enabled: false
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="canvas" height="90"></canvas>