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

【问题标题】：Vue-Chartjs onComplete custom labels - prevent blinkingVue-Chartjs onComplete 自定义标签 - 防止闪烁
【发布时间】：2020-03-31 08:31:47
【问题描述】：

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

animation: { onComplete: function () {

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

在此处查看示例fiddle

【问题讨论】：

标签： label chart.js data-visualization vue-chartjs

【解决方案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

【讨论】：

在您的解决方案中，标签仍然闪烁。但插件 chartjs-plugin-datalabels 使您可以设置 datalabels: { display: true}
啊，我没有意识到您希望数据标签永久存在。