ChartsJS Annotations Plugin -你可以创建一个工具提示来伴随一个注解吗?

klr1opcd  于 2023-08-05  发布在  Chart.js
关注(0)|答案(2)|浏览(137)

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

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

字符串
有人能解释一下这是如何做到的吗?

n53p2ov0

n53p2ov01#

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

字符串

s6fujrry

s6fujrry2#

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

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-plugin-annotation文档中的Label visibility example

相关问题