ChartJs - klikalny label

Question

Witajcie :)

Napotkałem mały problem :( Mam taki wykres:

I potrzebuję żeby po kliknięciu w "nr boczny 001" pokazał się alert "nr boczny 001" i tak z każdym. Zrobiłem, że gdy klika się w pasek np. czerwony albo niebieski to pokazuje mi jaka jest to etykieta ale niestety zależy mi na tym, aby po kliknieciu w label uzyskać taką informację :((

Pomożecie?

Oto kodzik:

var ajax = new XMLHttpRequest();
        ajax.open("GET", "include/get/getStatistics.php", true);
        ajax.send();
        ajax.onreadystatechange = function () {
            if (this.readyState == 4 && this.status == 200) {
                var data = JSON.parse(this.responseText);
                var barChart = document.getElementById('barChart1').getContext('2d');
                var myBarChart = new Chart(barChart, {
                    type: 'horizontalBar',
                    data: {
                        labels: data.forklift_numerBoczny,
                        datasets : [{
                            label: "Wykorzystane mth",
                            backgroundColor: 'rgb(23, 125, 255)',
                            borderColor: 'rgb(23, 125, 255)',
                            data: data.forklift_wartosc,
                        },{
                            label: "Limit miesięczny",
                            backgroundColor: 'rgb(228, 4, 4)',
                            borderColor: 'rgb(228, 4, 4)',
                            data: data.forklift_annualLimitOfEngineHours,
                        }],
                    },
                    options: {
                        responsive: true, 
                        maintainAspectRatio: false,
                        onClick: function (e) {
                        var activePointLabel = this.getElementsAtEvent(e)[0]._model.label;
                        alert(activePointLabel);
                    },
                        scales: {
                            yAxes: [{
                                ticks: {
                                    beginAtZero:true
                                }
                            }]
                        },
                        legend: {
                            display: false
                         },
                        tooltips: {
                             enabled: true,
                            showAllTooltips: true,
                        }
                    }
                });
                }
            }

 

Comments

Czy po kliknięciu w label metoda onClick z 27 linii jest wołana? Jeśli tak, to jaka wartość jest w zmiennej activePointLabel?

---

Wartość w zmiennej activePointLabel jeżeli kliknę na pasek niebieski/czerwony przy nr boczny 1 to nr boczny 1

---

A jaka tam jest wartość, gdy klikniesz w labelkę?

---

Mam takie coś :)

---

Ale ja pytam co się dzieje w funkcji, a nie w UI. :)

Zamień linijki 28 i 29 ze swojego skryptu na poniższe:

console.log('e:', e, ' /this.getElementsAtEvent(e):', this.getElementsAtEvent(e));

var activePointLabel = this.getElementsAtEvent(e)[0]._model.label;

console.log('activePointLabel:', activePointLabel);
alert(activePointLabel);

i sprawdź co pokazuje konsola przeglądarki, gdy klikniesz w labelkę po lewej stronie słupków na wykresie (np. na napis "nr boczny 001")? Ewentualnie: czy są tam jakieś błędy?

---

Błąd :((

Answer 1

Błąd z konsoli świadczy o tym, że funkcja do obsługi kliku jest wołana, ale metoda getElementsAtEvent zwraca pustą tablicę (nie ma nic pod zerowym indeksem), więc próba odczytu property _model.label rzuca błędem.

Testując demo z dokumentacji zauważyłem, że w prototype this wewnątrz onClick jest metoda getElementsAtXAxis, która zwraca dane dla klikniętego słupka na osi (może Ci to wystarczy), ale nie widzę analogicznej dla osi Y.

Można próbować ratować się samodzielnie namierzając słupek relatywnie do klikniętego obszaru. Property this.scale zwraca obiekt z osiami wykresu x-axis-0 oraz y-axis-0 (przynajmniej dla wykresu dwu osiowego). Tam można odczytać lokalizację oraz wymiary osi (X lub Y) i porównać je ze współrzędnymi dostępnymi z eventu, który przyszedł jako argument do onClick.