Label in Tooltip, aber nicht in x-Achse für Chartjs Liniendiagramm anzeigen
Ich verwende derzeit ein Liniendiagramm mit chart.js und habe ein Labelset, das wie folgt aussieht: ["January 2015", "February 2015", "March 2015", "April 2015", "May 2015", "June 2015"] . Ich möchte, dass das entsprechende Label im Tooltip für das Diagramm angezeigt wird, aber nur jedes alternierende Label auf der X-Achse des Diagramms angezeigt werden soll, um Engpässe zu vermeiden. Gibt es eine Möglichkeit, das zu erreichen?
Ich ersetze gerade jeden zweiten Wert von meinem Array mit "", aber während das die Überfüllung von meiner X-Achse entfernt, erfüllt es nicht meine Anforderung, das Etikett im Tooltip anzuzeigen.
5 Antworten
Erweitern Sie einfach das Liniendiagramm und ersetzen Sie die xLabels, die nach der Initialisierung nicht mehr benötigt werden
%Vor%Geige - Ссылка
Um die Antwort auf Potatopeelings zu erweitern, können wir tun:
%Vor%um die Anzahl der Etiketten (in diesem Fall 10) zu begrenzen, so dass Ihre Etiketten niemals überfüllt sind, egal wie viele Datenpunkte Sie haben.
Unter Diagrammoptionen können Sie unter xAxes die maxTickLimit-Eigenschaft beliebig festlegen:
%Vor%Geige: Ссылка
Dies war eines der schwierigsten Dinge, mit denen ich mich bei der Verwendung von ChartJs befasse.
Ich werde meine Lösung teilen: Ich habe gerade mit den Diagrammoptionen gespielt. Zuerst werde ich einige Eigenschaften für meine xAxe definieren. Beachten Sie, dass ich das Label mit dem Callback formatiere:
%Vor%Um den Tooltip-Titel zu formatieren, verwende ich Callbacks für die Tooltips :
%Vor%Mit den Diagrammoptionen kann ich verschiedene Inhalte für die X-Achsenbeschriftungen und die entsprechenden Tooltip-Titel anzeigen:
Bildbeschreibung hier eingeben
Hier finden Sie das vollständige Beispiel .
Hoffe, das hilft.
Tags und Links javascript canvas charts chart.js