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并等待下一版本的图表中的修复.js

注释事件不会更新图表

1 个答案: