我已经实现了此问题中描述的技术，以便在重要事件发生时在图表上绘制垂直线以显示关键日期。
但是，描述这些事件的文本可能会很长，因此仅在画布上绘制文本并不是一个好的解决方案。
有什么方法可以使用chart.js API在图表上（线的顶部）绘制一个不可见的点，当鼠标悬停在该点时，该点将变为交互式并显示工具提示？
据我所知，只有数据点会显示工具提示。我试图添加另一个系列来包含行数据，但是没有成功-它也为该系列创建了一个图例，我不想这样做。我将值设置为9999，试图使它们出现在画布的顶部，但这没有用，看起来像是hack。
您可以添加第二个数据集，该数据集在应绘制垂直线的x位置处包含一个值，该值应对应于第一个数据集的最大值。要使该点不可见，请使用定义透明的背景和边框颜色'rgba(0,0,0,0)'。
{
data: [null, null, 12],
pointRadius: 10,
backgroundColor: 'rgba(0,0,0,0)',
borderColor: 'rgba(0,0,0,0)'
}
要仅显示相关数据集的图例标签，您需要定义一个legend.labels.filter函数。
legend: {
labels: {
filter: legendItem => legendItem.datasetIndex == 0
}
},
此外，我们需要定义一些tooltip.callback功能以在工具提示中显示所需的数据。
请查看下面的可运行代码段，并查看其工作方式。该代码使用Chart.js的最新稳定版本（当前为2.9.3）。
new Chart('canvas', {
type: 'line',
plugins: [{
beforeDraw: chart => {
var ctx = chart.chart.ctx;
var xAxis = chart.scales['x-axis-0'];
var yAxis = chart.scales['y-axis-0'];
ctx.save();
var lineAtIndex = chart.data.datasets[0].lineAtIndex;
var x = xAxis.getPixelForTick(lineAtIndex);
ctx.strokeStyle = '#ff0000';
ctx.beginPath();
ctx.moveTo(x, yAxis.bottom);
ctx.lineTo(x, yAxis.top);
ctx.stroke();
ctx.restore();
}
}],
data: {
labels: ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"],
datasets: [{
label: 'My Dataset',
data: [12, 3, 2, 1, 8, 8, 2, 2, 3, 5, 7, 1],
lineAtIndex: 2,
lineTooltip: ['This is', 'a multi-line', 'tooltip']
},
{
data: [null, null, 12],
pointRadius: 10,
backgroundColor: 'rgba(0,0,0,0)',
borderColor: 'rgba(0,0,0,0)'
}
]
},
options: {
legend: {
labels: {
filter: legendItem => legendItem.datasetIndex == 0
}
},
tooltips: {
callbacks: {
title: (tooltipItems, data) => {
if (tooltipItems[0].datasetIndex == 0) {
return data.labels[tooltipItems[0].index];
}
return data.datasets[0].lineTooltip;
},
label: (tooltipItems, data) => {
if (tooltipItems.datasetIndex == 0) {
return data.datasets[0].label + ': ' + data.datasets[0].data[tooltipItems.index];
}
return null;
}
}
},
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="canvas" height="90"></canvas>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句