Chart.js: Verbergen von Serien durch Klicken auf die Legende

8

Ich entwickle eine Website, die chart.js (www.chartjs.org) verwendet.

Ich muss ein Liniendiagramm erstellen, das mehrere Datenreihen anzeigt, die Benutzer durch Klicken auf das entsprechende Legendensymbol verbergen oder anzeigen können (ähnlich wie bei Ссылка ).

Gibt es eine Möglichkeit, dies mit chartjs zu tun?

    
pomarc 22.01.2015, 15:49
quelle

4 Antworten

13

Sie können dies ausprobieren Shop für versteckte Datensätze erstellen

%Vor%

Verwenden Sie dann diese Funktion, um das Diagramm zu aktualisieren, indem Sie auf den Legendeneintrag

klicken %Vor%

Vergessen Sie nicht die aktualisierte Legendenvorlage in den Diagrammoptionen

%Vor%

In Kürze habe ich diesen onclick-Handler für die li-Komponente hinzugefügt

%Vor%

Zum Beispiel Geige

    
Igor 17.09.2015 15:16
quelle
2

Dies ist jetzt in Charts.js verfügbar

Aus der Dokumentation Ссылка

  

Legende Konfiguration

     

Die Legendenkonfiguration wird in den Namespace options.legend übergeben.   Die globalen Optionen für die Diagrammlegende sind in definiert   Chart.defaults.global.legend.

     

onClick -Funktion (event, legendItem) {} Ein Callback, der aufgerufen wird, wenn ein 'click' -Ereignis über einem Label-Element registriert wird

     

onHover function (event, legendItem) {} Ein Callback also   Wird aufgerufen, wenn ein "mousemove" -Ereignis über einem Label-Element registriert wird

    
benallansmith 29.03.2017 05:22
quelle
0

Ich habe keine Möglichkeit gefunden, dies zu tun. Es ist einfach, ein paar Klicks auf die Legendenvorlage zu setzen, und Sie können den Reihenstrich und den Alphakanal einfach auf 0 ändern, so dass der Bereich und der Strich verschwinden, aber ich habe keine Möglichkeit gefunden, dies in Punkten zu tun.

Ich habe beschlossen, Google-Diagramme für dieses spezielle Diagramm und chart.js zu verwenden, wenn ich dieses Verhalten nicht brauche, in der Hoffnung, dass die guten Entwickler von chart.js es in Zukunft hinzufügen werden.

    
pomarc 28.01.2015 20:58
quelle
-2
%Vor%

dxcharts haben eine Funktion namens onLegendClick, einige andere sind onSeriesClick und onPointClick. Ich hoffe, das hilft.

    
Alvin 10.08.2016 08:44
quelle

Tags und Links