Как вызвать всплывающую подсказку при наведении легенды? - PullRequest
Новая
       4

Как вызвать всплывающую подсказку при наведении легенды?

0 голосов
/ 30 января 2020

Я использую библиотеку Chart Js в своем проекте, и я пытался показать всплывающую подсказку для диаграммы ap ie как при наведении слайса, так и при наведении легенды, по умолчанию библиотека показывает только всплывающая подсказка при наведении слайса,

я пытался выполнить следующую функцию onHover 

  onHover: function (event, legendItem) {
              var index = legendItem.datasetIndex;
              var label = this.chart.data.datasets[index].label

              return label;
        }

Но следующая функция по-прежнему не имела эффекта ..

Весь код Конфигурация диаграммы следующая: 

optionsPagamenti = {
    maintainAspectRatio: false,
    legend: {
        display: true,
        position: "right",
        labels: {
            usePointStyle: true,
            boxWidth: 6
        },
          onHover: function (event, legendItem) {
              var index = legendItem.datasetIndex;
              var label = this.chart.data.datasets[index].label

              return label;
        }
    },
    tooltips: {
        backgroundColor: '#f5f5f5',
        titleFontColor: '#333',
        bodyFontColor: '#666',
        bodySpacing: 4,
        xPadding: 12,
        intersect: 1,
        displayColors: false,
        callbacks: {
            title: function (tooltipItem, data) {
                return data['labels'][tooltipItem[0]['index']];
            },
            label: function (tooltipItem, data) {
                return "€" + data['datasets'][0]['data'][tooltipItem['index']].toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,').replace(/[,.]/g, m => (m === ',' ? '.' : ','));
            }
        }
    },
    responsive: true,
};

Так как я могу показать всплывающую подсказку при наведении легенды?

1 Ответ

0 голосов
/ 30 января 2020

Решено с помощью следующего метода: 

onHover: function (event, legendItem) {
        var chart = this.chart;
        var index = legendItem.index;
        var segment = chart.getDatasetMeta(0).data[index];
        chart.tooltip._active = [segment]
        chart.tooltip.update()
        chart.draw()
    }

И я также добавил метод onLeave для отключения подсказки 

  onLeave: function (event, legendItem) {
            var chart = this.chart;
            var index = legendItem.index;
            chart.tooltip._active = []
            chart.tooltip.update()
            chart.draw()
        }
...