3

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

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

任何人都可以解释如何做到这一点？

4

1 回答 1

0

chart不直接回答您的问题，但您可以通过访问上下文和element（文档）以您喜欢的任何方式（在 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();
},
于 2021-08-04T13:23:52.673 回答