Как предотвратить обратный вызов всплывающей подсказки Chartjs, возвращающий несколько экземпляров одного и того же значения?

Я использую Chartjs с React. У меня есть график цен на криптовалюту с тремя наборами данных, один из которых является списком цен, один - горизонтальной линией, касательной к начальной цене, а другой - горизонтальной линией, касательной к наивысшей точке. Они здесь:

datasets: [
        {
          label: 'pricesData',
          fill: false,
          lineTension: 0,
          backgroundColor: 'rgba(75,192,192,1)',
          borderColor: chartColor,
          borderWidth: 2,
          data: prices
        },
        {
          
          label: '0 line',
          radius: 0,
          fill: false,
          borderDash: [10,5],
          data: zeroLine,
          backgroundColor: 'rgba(255,255,255,1)',
          borderColor: 'rgba(255, 255, 255,.5)',
      
      
        },
        {
          label: 'top Line',
          radius: 0,
          fill: false,
          borderDash: [10,5],
          data: topLine,
          borderColor: 'rgba(255, 255, 255,0)'
        }

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

callbacks: {
                label: function(tooltipItem, data) {
                    var item = data.datasets[0].data[tooltipItem.index];
                    var zeroLine = data.datasets[1].data[tooltipItem.index]
                    let properties = {
                        price: item,
                        percentChange: (((item-zeroLine)/zeroLine)*100).toFixed(2) 
                    }
                    props.parentCallback(properties);
                    return(item)
                }
            }

Теперь это работает, как и ожидалось, за исключением того, что он запускается три раза, и возвращаемый элемент заполняет всплывающую подсказку тремя экземплярами. Я полагаю, это потому, что у меня есть три набора данных. Как я могу предотвратить это и вызвать обратный вызов props только один раз и заполнить всплывающую подсказку только одним значением? Есть также небольшая задержка в частоте кадров, которая, как я полагаю, вызвана этим.


reactjs javascript react-chartjs react-chartjs-2 chart.js
person TDonnally    schedule 23.10.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я ответил на свой вопрос. Для тех, у кого есть подобная проблема, вы можете настроить всплывающую подсказку с помощью этой опции, чтобы она использовала только один набор данных:

tooltips: {
filter: function (tooltipItem) {
    return tooltipItem.datasetIndex === 0;
}
}
person TDonnally    schedule 23.10.2020