Używam Chartjów z Reaguj. Mam wykres cenowy Cryptourrency z trzema zestawami zbiorów danych z jednym z listy cen, jeden jest linią poziomą, która jest styczna do początkowej ceny i kolejnej linii poziomej, która jest stycznym najwyższego punktu. Tutaj są:

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)'
        }

Próbuję utworzyć funkcję, która zmienia wyświetlaną cenę w innym komponencie na podstawie tego, gdzie jesteś na wykresie. Oto funkcja zwrotna w opcji etykiety:

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)
                }
            }

Teraz to działa jak oczekiwano, z wyjątkiem, że działa trzy razy, a zwrócony element wypełnia podpowiedź z trzema przypadkami. Wyobrażam sobie, że mam trzy zestawy danych. Jak byś to uniemożliwić i zadzwonić tylko do wywołania rekwizytów i wypełnić podpowiedź tylko za pomocą jednej wartości? Istnieje również niewielki zaczepek framery, który wyobrażam sobie, jest spowodowany tym.

0
TDonnally 23 październik 2020, 19:09

1 odpowiedź

Najlepsza odpowiedź

Odpowiedziałem na moje własne pytanie. Dla każdego z podobnym problemem możesz skonfigurować narzędzie do tej opcji, aby użył tylko jednego zestawu danych:

tooltips: {
filter: function (tooltipItem) {
    return tooltipItem.datasetIndex === 0;
}
}
0
TDonnally 23 październik 2020, 16:16