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

Question

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

animation: { onComplete: function () {

接下来的问题是这些标签在栏悬停时闪烁。我还在许多其他自定义标签 examples/solutiond 中看到了相同的行为。有人设法解决这个问题吗？

请参阅此处示例 fiddle

Answer 1

闪烁效果是因为动画只有在条形图悬停时才会触发。您可以使用 onHover 选项在图表 canvas 悬停时触发。

这是一个示例逻辑：（使用插件 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

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

Vue-Chartjs onComplete custom labels - prevent blinking

label

data-visualization

chart.js

vue-chartjs