Datenstrukturen

In Chart.js sind Datenstrukturen sehr leistungsfähig. Dies ist einer meiner persönlichen Favoriten, da sie Ihre Daten auf lange Sicht vereinfachen können. Da sie die Daten schön paarweise hält.

Was ist eine Datenstruktur in Chart.js?

Im Wesentlichen handelt es sich um ein benutzerdefiniertes JavaScript-Objekt, das von Chart.js gelesen werden kann, um die Daten (Punkte) und Beschriftungen zu zeichnen. Zeigen ist besser als erzählen. Schauen Sie sich das Video an und danach können Sie unten mehr lesen.

Unten sehen Sie zwei Optionen. Zuerst ein Beispiel für Standarddaten. Das zweite ist die Datenstruktur.

Beispiel für Standarddaten in Chart.js

// dataset 1
labels: ['Red', 'Blue', 'Green'],
data: [10, 1, 6]

Dies ist ein Standarddatenobjekt, das ganz einfach und in Ordnung aussieht. Wenn Sie jedoch ein Element löschen möchten oder im JavaScript-Array-Terminus sagen wir pop, slice oder shift ein Element, müssen Sie es zweimal tun. Einmal für das Label und die Daten.

Beispiel für Datenstruktur in Chart.js

data: [
  {team: 'Red', salesQuantity: 10, salesDollars: 100},
  {team: 'Blue', salesQuantity: 1, salesDollars: 10},
  {team: 'Green', salesQuantity: 6, salesDollars: 60},
]

Mit der Datenstruktur führt das Entfernen eines Elements aus einer Datenstruktur dazu, dass alle übereinstimmenden Elemente entfernt werden. Das ist wirklich großartig, weil es Fehler vermeidet und doppelte Arbeit spart. Da die Beschriftungen im Wesentlichen jetzt in die Daten integriert sind.

Zweitens können wir schnell zwischen den Datensätzen wechseln. Wenn Sie mit Datenobjekten vertraut sind, können Sie hier Ähnlichkeiten erkennen und die Auswahl der Anzeige des Namespace data.salesQuantity oder data.salesDollars ermöglichen.

Wenn Sie beispielsweise die Diagrammdaten von Verkaufsmenge auf Verkaufsdollar ändern möchten, kann dies schnell erfolgen, ohne zusätzliche Datensätze hinzufügen zu müssen.

Wie man Arrays in Datenstrukturen in Chart.js konvertiert

Ein weiteres Thema im Zusammenhang mit Datenstrukturen ist, wie man sie in eine schöne Datenstruktur umwandelt, die wir verwenden können. Dazu müssen wir Objekte erstellen, was in JavaScript leicht mit einer Schleife gemacht werden kann.

Dieses Video zeigt Ihnen schön, wie man mehrere Arrays in Datenstrukturen umwandelt, die Sie sofort für Chart.js verwenden können.

Sobald Sie in der Lage sind, Datenstrukturen zu erstellen, sind Sie bereit für die fortgeschrittenen Funktionen. Datenstrukturen sind leistungsfähig, aber Sie müssen wissen, wie Sie sie verwenden oder sogar Segmente der Datenstrukturen verwenden. Sie sind nicht nur für einen einzelnen Datensatz erforderlich. Es kann mit mehreren gemacht werden. Wie in diesem Video gezeigt.

Wie man Datenstrukturen für mehrere Datensätze in Chart.js verwendet

Auswahl von Datenstruktursegmenten zum Zeichnen von Linien in Chart.js

Schließlich können die Datenstrukturen in Chart.js in Segmenten verwendet werden. Wir können einfach den Teil bekommen, den wir wollen, und ihn anzeigen lassen. Das bedeutet, wenn Sie eine große Datenstruktur haben, können wir mit dieser Datenstruktur an einem bestimmten Datensatz arbeiten. Dies sind die weniger bekannten, aber sehr nützlichen Funktionen. Sehen Sie sich dieses Video an, um das zu verstehen.