Share
In den letzten vier Tutorials haben Sie viel über Chart.js gelernt. Nachdem Sie die ersten vier Lernprogramme gelesen haben, sollten Sie jetzt in der Lage sein, die QuickInfos und Beschriftungen anzupassen, die Schriftarten zu ändern und verschiedene Diagrammtypen zu erstellen. Ein Aspekt von Chart.js, der in dieser Serie noch nicht behandelt wurde, sind Skalen.
Maßstäbe haben sich seit Version v1.0 der Bibliothek stark verändert und sind jetzt wesentlich leistungsfähiger. In diesem Lernprogramm erfahren Sie, wie Sie Skalen bearbeiten und deren Aussehen mithilfe verschiedener Optionen der Bibliothek steuern.
Alle Konfigurationsoptionen für Gitternetzlinien werden unter der Skalierungsoption in verschachtelt gridLines Schlüssel. Dieser Schlüssel definiert Optionen zum Anpassen der Rasterlinien, die senkrecht zu den Achsen verlaufen. Ändern wir die Rasterlinien des Liniendiagramms, das Sie im Lernprogramm für Linien- und Balkendiagramme erstellt haben.
Sie können die Rasterlinien eines Diagramms mithilfe von anzeigen oder ausblenden Anzeige Schlüssel. Ihr Anfangswert ist wahr, Daher werden die Gitterlinien standardmäßig angezeigt. Die Farbe der Gitterlinien kann mit dem angegeben werden Farbe Schlüssel. Wenn Sie möchten, dass die Gitterlinien aus Strichen bestehen und nicht durchgezogene Linien sind, können Sie einen Wert für die Länge und den Abstand von Strichen als Wert für die angeben borderDash Schlüssel. Sie können die Breite und Farbe der Linien für den ersten oder den Nullindex mit der Taste festlegen zeroLineWidth und zeroLineColor Tasten jeweils.
In allen bisherigen Diagrammen enthielten die Skalen keinen beschreibenden Text, um den Betrachter wissen zu lassen, was eine bestimmte Achse darstellt. Dies kann die Diagramme weniger nützlich machen. Wenn Sie beispielsweise ein Diagramm der Fahrzeuggeschwindigkeit sehen und die Einheit, in der die Geschwindigkeit auf der y-Achse dargestellt ist, nicht ermitteln können, ist das Diagramm ziemlich unbrauchbar.
Sie können die Skalenbeschriftungen in einem Diagramm anzeigen oder ausblenden, indem Sie die verwenden Anzeige Schlüssel. Die Skalenbeschriftungen sind standardmäßig ausgeblendet. Der Text, der auf diesen Skalen angezeigt werden soll, kann mit angegeben werden labelString Schlüssel. Sie können auch die Schriftfarbe, die Familie, die Größe und den Stil mithilfe von festlegen Schriftfarbe, Schriftfamilie, Schriftgröße, und Schriftstil Tasten jeweils.
Hier ist das gleiche alte Autogeschwindigkeits-Diagramm mit anderen Kartenoptionen angegeben.
var chartOptions = legend: display: true, position: 'top', Beschriftungen: boxWidth: 80, fontColor: 'black', Skalen: xAxes: [gridLines: display: false, color: "black ", scaleLabel: display: true, labelString:" Zeit in Sekunden ", fontColor:" red "], yAxes: [gridLines: color:" black ", borderDash: [2, 5],, scaleLabel: display: true, labelString: "Geschwindigkeit in Meilen pro Stunde", fontColor: "green";
Es gibt einen weiteren Schlüssel namens offsetGridLines. Wenn eingestellt auf wahr, es verschiebt die Beschriftungen in die Mitte der Gitterlinien. Dies ist im Allgemeinen beim Erstellen von Balkendiagrammen hilfreich.
Lineare Skalen werden zur Darstellung numerischer Daten verwendet. Diese Skalen können entweder auf der X- oder Y-Achse erstellt werden. In den meisten Fällen erkennt Chart.js automatisch die Minimal- und Maximalwerte für die Skalen. Dies kann jedoch zu Verwirrung führen.
Angenommen, Sie möchten die Noten von Schülern in einer Klasse zeichnen. Wenn die Höchstnoten für den Test 200 waren, aber keiner der Schüler mehr als 180 Punkte erzielte, wird die Skala höchstwahrscheinlich bei 180 liegen. In solchen Fällen können die Leser nicht wissen, ob die Höchstnoten 180 oder 200 waren.
Chart.js verfügt über mehrere integrierte Optionen, mit denen Sie verschiedene Tasten für Skalen steuern können. Sie können den minimalen und maximalen Wert für Skalen mit angeben Mindest und max Schlüssel. Die Schrittweite der Skalen kann mit der Taste eingestellt werden Schrittlänge Eigentum. Auf diese Weise können Sie bestimmen, wie viele Rasterlinien in das Diagramm gezeichnet werden sollen. Eine andere Möglichkeit, ein Limit für die Anzahl der in einem Diagramm angezeigten Gitterlinien und Ticks festzulegen, ist die Verwendung von maxTicksLimit Schlüssel.
Hier ist der Code, um die minimalen und maximalen Skalenwerte für die horizontale Skala im Balkendiagramm für ein vorheriges Lernprogramm dieser Serie anzugeben.
var chartOptions = skaliert: yAxes: [barPercentage: 0.5, gridLines: display: false]], xAxes: [gridLines: zeroLineColor: "black", zeroLineWidth: 2, Ticks: min: 0, max: 6500, stepSize: 1300, scaleLabel: display: true, labelString: "Dichte in kg / m3", Elemente: Rechteck: borderSkipped: 'left',;
Genau wie bei der linearen Skala können Sie auch logarithmische Skalen erstellen, um Werte in Ihrem Diagramm darzustellen. In diesem Fall wird die Position eines Punktes auf den Achsen durch logarithmische Interpolation bestimmt. Diese Skalen können auch auf der X-Achse und der Y-Achse platziert werden.
Dieser Skalentyp wird für Radar- und Polardiagrammtypen verwendet. Im Gegensatz zum regulären linearen Maßstab liegt dieser Bereich über dem Diagrammbereich und ist nicht auf der Achse positioniert.
Es gibt viele Schlüssel, die speziell auf radiale Skalen ausgerichtet sind. Zum Beispiel können Sie die lineArc Taste, um anzugeben, ob die Gitterlinien kreisförmig oder gerade sein sollen. Der Standardwert ist falsch für Radardiagramme und wahr für Polardiagramme.
Sie können das Erscheinungsbild von Linien, die von der Mitte des Diagramms bis zu den Punktbeschriftungen verlaufen, mit dem Symbol steuern angleLines Schlüssel. Es akzeptiert ein Objekt als Wert. Das Objekt kann Tasten enthalten, um die Farbe und Breite von Winkellinien zu steuern. Sie können die Winkellinien ausblenden, indem Sie den Wert von festlegen Anzeige Schlüssel zu falsch. Die Farbe und Breite der Winkellinien kann mit der Taste gesteuert werden Farbe und Linienbreite Schlüssel.
Das Erscheinungsbild von Punktetiketten kann mithilfe von gesteuert werden pointLabels Schlüssel. Genau wie Winkellinien akzeptiert dieser Schlüssel auch ein Objekt als Wert. Bitte beachten Sie, dass diese Optionen nur wirken, wenn der Wert von lineArc ist eingestellt auf falsch. Die Schriftfarbe, -familie, -größe und -stil können mit festgelegt werden Schriftfarbe, Schriftfamilie, Schriftgröße, und Schriftstil Schlüssel.
Sie können auch einen Mindest- und Höchstwert für die Waage mit einstellen Mindest und max Schlüssel. Die Schrittweite und die maximale Anzahl der Teilstriche auf der Skala können mit festgelegt werden Schrittlänge und maxTicksLimit Schlüssel. Diese Optionen sind unter verfügbar Zecken Schlüssel. Einige andere Schlüssel sind im Inneren vorhanden Zecken sind showLabelBackdrop, Hintergrundfarbe, backdropPaddingX, und backDropPaddingY. Sie können sie verwenden, um den Hintergrund hinter den Hilfsstrichbeschriftungen ein- oder auszublenden und die Breite, Höhe und Farbe zu steuern.
Sie können auch die gridLines Schlüssel, den wir für das Liniendiagramm verwendet haben, um Farbe und Breite für die Gitterlinien in einem Radardiagramm festzulegen. Im Folgenden finden Sie einige Optionen zum Erstellen eines Radardiagramms mit benutzerdefinierten Skalen.
var chartOptions = scale: gridLines: color: "black", lineWidth: 3, angleLines: display: false, Ticks: beginAtZero: true, min: 0, max: 100, stepSize: 20, pointLabels : fontSize: 18, fontColor: "green", Legende: position: 'left';
Sie können eine Zeitskala verwenden, um Zeiten und Daten in einem Diagramm anzuzeigen. Wie im einführenden Tutorial von Chart.js erwähnt, müssen Sie Moment.js in Ihre Projekte einschließen, um die Zeit anzuzeigen. Eine Einschränkung bei der Verwendung einer Zeitskala besteht darin, dass sie nur auf der x-Achse angezeigt werden kann. Alle Konfigurationsoptionen für die Zeitskala befinden sich unter der Zeit Unteroption.
Um eine Zeitskala zu erstellen, müssen Sie den Wert von festlegen Art Schlüssel zu Zeit unter dem xAchsen Unteroption. Danach können Sie den Wert verschiedener Tasten unter einstellen Zeit. Die Einheit, mit der die Ticks gezeichnet werden sollen, wird mit eingestellt Einheit Schlüssel.
Die Stufe der Einheit kann mit dem angegeben werden unitStepSize Schlüssel. Das Format, in dem die Beschriftungen für die Ticks angezeigt werden sollen, wird mit festgelegt displayFormats Unteroption. Weitere Informationen zu den zulässigen Zeichenfolgeformaten finden Sie auf der Moment.js-Website.
Das Format, in dem die Uhrzeit in den Tooltips angezeigt wird, kann mit festgelegt werden tooltipFormat Schlüssel.
Sie können die Zeit auch abrunden, bevor Sie sie mit der Taste in der Karte darstellen runden Schlüssel. Seien Sie vorsichtig, wenn Sie einen Wert für einstellen runden. Nehmen wir an, Sie setzen den Wert auf Stunde Es gibt zwei Zeiten, die in der Grafik dargestellt werden müssen. Wenn eine Zeit um 5:30 Uhr morgens und eine andere um 05:50 Uhr morgens liegt, werden beide auf dem Häkchen um 5:00 Uhr morgens angezeigt. Setzen Sie den Wert auf Minute wird sie auf die 5:30 bzw. 5:50 Punkte einzeichnen.
Das am Anfang des Tutorials geplante Liniendiagramm kann mithilfe des folgenden Codes anhand einer Zeitskala dargestellt werden.
var chartOptions = legend: display: true, position: 'top', Beschriftungen: boxWidth: 80, fontColor: 'black', Skalen: xAxes: [type: "time", time: unit: 'hour', unitStepSize: 0.5, round: 'hour', tooltipFormat: "h: mm: ss a", displayFormats: Stunde: 'MMM D, h: mm A'], yAxes: [gridLines: color: "black", borderDash: [2, 5],, scaleLabel: display: true, labelString: "Geschwindigkeit in Meilen pro Stunde", fontColor: "green";
In diesem Lernprogramm erfahren Sie mehr über die verschiedenen Arten von Skalen in Chart.js. Sie können jetzt die Skalen in einem Diagramm auf einfache Weise anpassen, indem Sie deren Farbe, Mindest- und Höchstwert, Anzahl der Ticks und andere solche Faktoren steuern.
Nachdem Sie alle fünf Tutorials dieser Serie gelesen haben, sollten Sie jetzt alle in Chart.js verfügbaren Diagramme erstellen können. Ich hoffe, Ihnen hat das Tutorial und die Serie gefallen.
Wenn Sie nach zusätzlichen Ressourcen suchen, um zu studieren oder in Ihrer Arbeit zu verwenden, schauen Sie nach, was wir auf dem Envato-Marktplatz zur Verfügung haben. Wenn Sie Fragen haben, teilen Sie mir dies bitte in den Kommentaren mit. Haben Sie diese Bibliothek schon einmal in Ihren eigenen Projekten verwendet? Bitte teile in den Kommentaren einige Tipps.
Accentsconagua