Chart.js 自定义事件和注释的垂直线

我有一张显示趋势的图表。我需要添加自定义垂直线来表示报告期间发生的一些事件。这可能有助于我了解这些事件与趋势变化（如有）之间的联系

示例：请查看中心的消息气泡和分散的虚线（单击以获得更高的分辨率）

检查了最新的，但找不到任何合适的

我脑子里有几个想法：

• ，与主数据分开，位于同一画布上
• 使用Javascript计算画布大小，并手动在画布上放置自定义垂直线

---

这两种方法听起来都是权宜之计，我想知道是否有更好的方法。谢谢。

您可以使用。它提供了可用于执行自定义代码的不同挂钩。在下面的代码片段中，我使用

afterDraw

hook为

dataset

中表示每个事件的点绘制虚线

可以使用在

画布上绘制消息气泡


const标签=['2020-02-06'、'2020-02-07'、'2020-02-08'、'2020-02-09'、'2020-02-10'、'2020-02-11'、'2020-02-12']；
常数事件=['2020-02-08'、'2020-02-10']；
常量值=[75,56,33,44,71,62,24]；
var图标=新图像（20,20）；
icon.src=https://i.stack.imgur.com/EXAgg.png';
新图表（document.getElementById（“myChart”）{
键入：“行”，
插件：[{
后绘图：图表=>{
var ctx=chart.chart.ctx；
var xAxis=图表刻度['x轴-0']；
var yAxis=图表刻度['y轴-0']；
xAxis.ticks.forEach（（值，索引）=>{
if（事件包括（标签[索引]）{
var x=xAxis.getPixelForTick（索引）；
ctx.save（）；
ctx.setLineDash（[10,5]）；
ctx.strokeStyle='#8888888'；
ctx.beginPath（）；
ctx.moveTo（x，yAxis.bottom）；
ctx.lineTo（x，yAxis.top）；
ctx.stroke（）；
ctx.restore（）；
drawImage（图标，x-12，yAxis.bottom-15）；
}
});      
}
}],
数据：{
标签：标签，
数据集：[{
标签：“我的数据集”，
数据：价值观，
填充：假，
背景颜色：“绿色”，
边框颜色：“绿色”
}]
},
选项：{
回答：是的，
标题：{
显示：假
},
图例：{
显示：假
},
比例：{
雅克斯：[{
滴答声：{
贝吉纳泽罗：是的，
步长：20
}
}],
xAxes：[{
键入：“时间”，
时间：{
单位：'天'，
tooltipFormat:'MMM DD'
},
网格线：{
显示：假
}        
}],
}
}
});

非常感谢您！对于那些发现这一点的人，很少有（不明显的）评论：1。当您移动鼠标和图表重新呈现工具提示时，会持续触发。2.工具提示样式会影响主画布上的所有文本，因此将文本放在主画布上，然后将其放回主画布。3.画布文本在视网膜屏幕上会变得模糊，除非