Chart.js: ukrywanie serii przez kliknięcie na legendę

Question

Zajmuję się tworzeniem strony korzystającej z chart.js (www.chartjs.org).

Muszę sporządzić wykres liniowy, który pokazuje wiele serii danych, które użytkownicy mogą ukryć lub pokazać, klikając odpowiedni symbol legendy (podobny do tego http://js.syncfusion.com/demos/web/#!/azure/chart/linechart).

Czy można to zrobić za pomocą chartjs?

Answer 1

Nie znalazłem sposobu, aby to zrobić. Łatwo jest wprowadzić pewne zachowanie onclick w szablonie legendy i łatwo można zmienić skok serii i kolory kanału alfa na 0, aby obszar i obrys zniknął, ale nie znalazłem sposobu, aby to zrobić w punktach.

Zdecydowałem się użyć wykresów google dla tego konkretnego wykresu i pliku chart.js, gdy nie potrzebuję tego zachowania, mając nadzieję, że dobrzy twórcy pliku chart.js dodadzą go w przyszłości.

Answer 2

Można spróbować to
Tworzenie sklepu ukrytych zbiorów danych

window.chartName = new Chart(... 

window.chartName.store = new Array(); 

Następnie za pomocą tej funkcji można aktualizować wykresu, należy obchodzić się przez kliknięcie na pozycji legendy

function updateDataset(legendLi, chart, label) { 
     var store = chart.store; 
     var exists = false; 
     for (var i = 0; i < store.length; i++) { 
     if (store[i][0] === label) { 
      exists = true; 
      chart.datasets.push(store.splice(i, 1)[0][1]); 
      legendLi.fadeTo("slow", 1); 
     } 
     } 
     if (!exists) { 
     for (var i = 0; i < chart.datasets.length; i++) { 
      if (chart.datasets[i].label === label) { 
      chart.store.push([label, chart.datasets.splice(i, 1)[0]]); 
      legendLi.fadeTo("slow", 0.33); 
      } 
     } 
     } 
     chart.update(); 
    } 

nie zapomnij zaktualizowane szablon legendy w opcjach wykresu:

legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li class=\"legend-item\" onclick=\"updateDataset($(this), window.chartName, '<%=datasets[i].label%>')\"><span style=\"background-color:<%=datasets[i].strokeColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>" 

Krótko, dodałem ten moduł obsługi onclick dla elementu li

<li class=\"legend-item\" onclick=\"updateDataset($(this), window.chartName , '<%=datasets[i].label%>')\">< 

Na przykład fiddle

Answer 3

onLegendClick: function (e) { 
var series = e.target; 
       series.isVisible() ? series.hide() : series.show(); 
      }, 

dxcharts mieć funkcję o nazwie onLegendClick, kilka innych są onSeriesClick i onPointClick. Mam nadzieję, że to pomoże.

Answer 4

To jest teraz dostępny w Charts.js

Z dokumentacji http://www.chartjs.org/docs/#chart-configuration-legend-configuration

Legenda Konfiguracja

Konfiguracja legenda jest przekazywana do nazw options.legend. Globalne opcje legendy wykresu są zdefiniowane w Chart.defaults.global.legend.

onClick function (event, legendItem) {} a zwrotna, która jest wywoływana, gdy 'kliknięcia' zdarzenie jest rejestrowane na szczycie elementu label

onHover funkcyjnego (zdarzeń legendItem) {} a wywołanie zwrotne, które jest wywołane, gdy zdarzenie "mousemove" jest zarejestrowane na etykiecie pozycji