ChartsJS注释插件-您可以创建一个工具提示来伴随注释吗？

问题描述

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!");
      },},

有人可以解释如何做到吗？

解决方法

不是直接回答您的问题，但您可以通过访问上下文 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();
},