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