ChartsJS注释插件-你能创建一个注释附带的工具提示吗

Question

im试图弄清楚当我将鼠标悬停在我绘制的垂直线注释上时如何添加工具提示：

annotation: {
annotations: [{
"drawTime": "afterDatasetsDraw",
"type": "line",
"mode": "vertical",
"scaleID": "x-axis-0",
"value": "2020-04-01 12:20:27.709523",
"borderWidth": 2,
"borderColor": "red",
"label": {
"content": "Example Content",
"enabled": true,
"position": "top"
},
onMouseover: function(e) {
console.log("I AM GETTING CALLED!");
},
},

有人能解释一下这是怎么做到的吗？

Answer 1

不直接回答您的问题，但您可以通过访问上下文chart和element(docs(以任何您喜欢的方式修改图表和注释(在ChartJS v3中(

我用它来改变悬停时的注释风格(在TypeScript中(：

enter: (context) => {
const id = context.element.options.id!;
((context.chart.options.plugins!.annotation!.annotations as any)[id] as AnnotationOptions).borderColor = 'blue';
context.chart.canvas.style.cursor = 'pointer';
context.chart.update();
},
leave: (context) => {
const id = context.element.options.id!;
((context.chart.options.plugins!.annotation!.annotations as any)[id] as AnnotationOptions).borderColor = 'rgb(255, 99, 132)';
context.chart.canvas.style.cursor = 'default';
context.chart.update();
},

Answer 2

您可以为注释使用标签，当鼠标进入和离开时，其显示会发生更改(请参阅事件配置(。

annotation: {
annotations: [{
type: 'line',
borderWidth: 2,
xMin: someX,
xMax: someX, // xMin = xMax for vertical line
label: {
display: false,
backgroundColor: 'green',
drawTime: 'afterDatasetsDraw',
content: 'Some content for tooltip'
},
enter({ element }, event) {
element.label.options.display = true;
return true; // force update
},
leave({ element }, event) {
element.label.options.display = false;
return true;
}
}]
}

请参阅chartjs插件注释文档中的标签可见性示例。