Vue-Chartjs onComplete自定义标签-防止闪烁

Question

要为Vue-Chartjs计算自定义标签，我唯一可以找到的解决方案是通过

animation: { onComplete: function () {

随之而来的问题是，这些标签在滚动条上闪烁。在许多其他自定义标签示例/解决方案中，我也看到了相同的行为。有谁设法解决这个问题？

在此处查看示例fiddle

Answer 1

之所以会产生闪烁效果，是因为仅在将小节悬停时才触发动画。您可以在悬停图表画布时使用onHover选项触发。

以下是示例逻辑：（使用插件chartjs-plugin-datalabels使其更容易）

options : {
 onHover : function (e) {
    const display = e.type === 'mouseout' ? false : true
    const labels = this.chart.options.plugins.datalabels
    if (display&&labels.display) return //avoid updating if already set
    labels.display = display
    this.chart.update();
 }
}

working example