javascript - 注释事件不更新图表

Question

在我使用 Chart.js 的图表上，我有一个使用 chartjs-plugin-annotation 创建的注释。我希望注释标签在悬停在线上时可见。但我无法让它工作。我有以下代码:

//define ChartOneData
var ctx = document.getElementById("chart").getContext("2d");

var chartOne = new Chart(ctx, {
    type: 'line',
    data: chartOneData,
    options: {
        annotation: {
            events: ["mouseenter", "mouseleave"],
            annotations: [{
                type: 'line',
                mode: 'vertical',
                scaleID: 'x-axis-0',
                value: 1,
                label: {
                    enabled: false,
                    content: "Text Label",
                },
                onMouseenter: function(e) {
                    var element = this;
                    element.options.label.enabled = true;
                    element.chartInstance.update();
                },
                onMouseleave: function(e) {
                    var element = this;
                    element.options.label.enabled = false;
                    element.chartInstance.update();
                }]
            }
        }
    }
}

事件触发并更改“已启用”属性(在控制台测试中可见)，但图表和视觉效果不会更新。事实上，我在控制台中收到错误:

Unable to preventDefault inside passive event listener invocation.
dispatcher @ chartjs-plugin-annotation.js:261

我不明白这个，谁能帮忙？

Answer 1

原来这是底层插件的问题。该代码是正确的，适用于 chart.js 版本 2.5 和 2.6，但不适用于 2.7。 chart-annotations github 存储库中添加了一个问题。

解决方案是降级到 2.6 并等待下一版本的 charts.js 中的修复