Vue -Chart js onComplete пользовательских ярлыков - предотвратить мигание

Question

Чтобы рассчитать пользовательские метки для Vue -Chart js, единственное решение, которое я смог найти, было через

animation: { onComplete: function () {

. Следующая проблема заключается в том, что эти метки мигают при наведении курсора. Я также видел такое же поведение во многих других пользовательских примерах с метками / solutiond. Кому-нибудь удалось решить эту проблему?

См. Пример здесь fiddle

Answer 1

Эффект мигания вызван тем, что анимация срабатывает только при наведении баров. Вы можете использовать опцию onHover, чтобы запускать каждый раз, когда на холсте диаграммы.

Вот пример logi c: (для упрощения используется диаграмма плагинов js -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();
 }
}

рабочий пример