Wenn Sie gerade erst mit JavaScript beginnen, sollten Sie wissen, dass es sich hervorragend zur Datenvisualisierung eignet. Datenvisualisierung ist derzeit eine äußerst relevante Fähigkeit, da wir uns im Zeitalter von Big Data befinden. Visualisierungstools sind unverzichtbar, um all das zu verstehen und Erkenntnisse daraus zu gewinnen.
Hier ist also ein grundlegender Überblick darüber, wie man Diagramme mit JavaScript erstellt.
Was Sie brauchen, um Diagramme mit JavaScript zu erstellen
Internetbrowser
Das Erste, was Sie benötigen, um eine der Hunderte von JavaScript-Lösungen für Diagramme ist ein Internetbrowser. Chrome oder Firefox eignen sich beide für diese Übung.
Texteditor
Sie benötigen auch einen Texteditor. Notepad reicht völlig aus, aber idealerweise sollten Sie sich für einen fortgeschrittenen Code-Editor wie VS Code entscheiden. Er bietet Ihnen ein komfortableres Nutzererlebnis, das das Schreiben von HTML5, CSS, JavaScript usw. erleichtert. Der Code-Editor hilft Ihnen, Fehler zu finden und zu korrigieren, falls Ihr Code nicht läuft.
Diagrammbibliothek
Schließlich benötigen Sie eine Diagrammbibliothek, um das gewünschte Diagramm zu erzeugen. Ich empfehle JSCharting, es gibt jedoch unzählige Alternativen zur Auswahl. Dieses Tutorial konzentriert sich also auf JSCharting. JSCharting kann alle Arten von Diagrammen mit SVG zeichnen und ist einfach zu bedienen. Die API vereinfacht vieles und eignet sich gut zum Experimentieren für Einsteiger.
Daten
Sofern Sie nicht bereits über Daten verfügen, um ein Diagramm zu erstellen, müssen Sie sich welche beschaffen. Sie können Daten von Stellen wie dem CDC, der WHO oder dem WFP erhalten. Jede Datenquelle, die zwei Werte gegenüberstellt, eignet sich. Sogar ein Diagramm, das die Regenmenge einer Stadt oder eines Landes pro Jahr erfasst, ist geeignet.
Wie Sie Diagramme mit JavaScript erstellen
- Leeres Diagramm hinzufügen
Sie müssen zunächst ein leeres Diagramm herunterladen mit dies. Diese Datei enthält
- index.html
- js/index.js
Die .html-Datei ist bis auf etwas Standardcode leer. Die .js-Datei ist komplett leer.
- Öffnen Sie die Datei index.html in dem von Ihnen gewählten Code-Editor und fügen Sie ein Script-Tag hinzu, um die JSCharting-Bibliothek einzubinden. Tun Sie dies nach dem schließenden </body>-Tag.
Der Code sollte wie folgt aussehen:
</body>
<script src="https://code.jscharting.com/2.9.0/jscharting.js"></script>
</html>
- verwenden Sie dieselbe Technik, um ein Skript-Tag hinzuzufügen, das auf eine leere .js-Datei verweist. Fügen Sie es nach dem JSCharting-Skript hinzu. Es sollte so aussehen:
</body>
<script src="https://code.jscharting.com/2.9.0/jscharting.js"></script>
<script src="js/index.js"></script>
</html>
- Fügen Sie schließlich einen <div>-Platzhalter in der HTML-Datei hinzu, der festlegt, wo das Diagramm gezeichnet werden soll.
Es sollte in etwa so aussehen:
<body>
<div id="chartDiv" style="width:50%; height:300px; margin:0 auto;"></div>
</body>
- Das div-Element sollte eine ID haben, damit dem Diagramm mitgeteilt werden kann, in welchem div es gezeichnet werden soll. Hier lautet die ID chartDiv.
Öffnen Sie die .js-Datei und fügen Sie ein leeres Diagramm hinzu, indem Sie den folgenden Code schreiben:
JSC.Chart('chartDiv', {});
- Öffnen Sie abschließend die Datei index.html in einem Browser. Sie können die Datei per Drag & Drop in einen Browser wie Chrome ziehen. Sie sehen dann ein kleines JSC-Logo auf der Seite. Damit ist der erste Schritt abgeschlossen zu Diagramme mit JavaScript versenden.
- Ein wenig ausprobieren
Fügen Sie ein paar Werte hinzu, um mit dem Diagramm herumzuspielen. Ersetzen Sie den Inhalt der .js-Datei durch den folgenden Code:
JSC.Chart('chartDiv', {
type: 'horizontal column',
series: [
{
points: [
{x: 'Äpfel', y: 50},
{x: 'Orangen', y: 42}
]
}
]
});
- Aktualisiere den Browser, in dem die Seite geladen ist, und du siehst möglicherweise ein Balkendiagramm. Das liegt daran, dass du den Typ im Code auf 'horizontal column' gesetzt hast.
Kommen wir nun zur Sache.
- Bereiten Sie Ihre Daten vor und fügen Sie sie zusammen
- Das CSV-Datenformat steht für Comma Separated Values (durch Kommas getrennte Werte). Diese Datei enthält Zeilen, wobei jede einen Datensatz oder Eintrag darstellt. Die erste Werte-Zeile enthält die Namen der durch Kommas getrennten Werte. Das ist die Spalte. Die weiteren Zeilen enthalten die eigentlichen Werte. Zum Beispiel:
Name, Alter
Milton, 45
Harry, 34
- CSV ist lesbar, aber es gibt mehrere Varianten dieses Formats. Wenn Werte Kommas enthalten, wie zum Beispiel Postadressen, funktioniert das Format so nicht. Daher muss jeder Wert in Anführungszeichen gesetzt werden. So:
„Name“, „Alter“
“Milton”, “45”
“Harry”, “34”
- JSCharting bietet dafür viele hilfreiche Tools. Sie müssen sich keine Sorgen mehr um CSV machen und können es in JSON (JavaScript Object Notation) umwandeln. Das Ergebnis ist ein Array von Objekten.
Laden Sie zunächst herunter dies Datei mit CDC-Daten für ein Beispielprojekt. Sie können diese CSV-Datei in Excel öffnen. Sie müssen die CSV-Daten in Echtzeit per JavaScript-Code herunterladen. Der Code kann etwas verwirrend sein, ist aber kurz. Sie können ihn auch verwenden, um beliebige CSV- oder JSON-Dateien aus dem Internet abzurufen. - Ersetze den Inhalt der Datei index.js durch Folgendes:
fetch('https://data.cdc.gov/resource/w9j2-ggv5.csv')
.then(function (response) {
return response.text();
})
.then(function (text) {
csvToSeries(text);
})
.catch(function (error) {
//Etwas ist schiefgelaufen
console.log(error);
});
function csvToSeries(text) {
console.log(text);
}
- Der komplexe Code sorgt dafür, dass alle Daten sofort verfügbar sind. Deshalb wird eine fetch()-Funktion verwendet.
- der then(…)-Code wird aufgerufen, wenn die Antwort eintrifft. Die Funktion wandelt die Antwort in Text um und gibt ihn anschließend zurück.
- das zweite Argument der then(…)-Funktion übergibt den Text als Argument.
- Die Funktion catch() legt fest, was zu tun ist, wenn etwas schiefgeht. Das können Netzwerkprobleme, falsche URLs usw. sein. In diesen Fällen wird der Fehler an die Konsole gesendet.
- Danach übergibt die Funktion csvToSeries() den Text zur Prüfung an die Konsole.
- Alles zusammenfügen
Fügen Sie am Ende der Datei index.js diesen Code hinzu, um das Diagramm darzustellen:
function renderChart(series){
JSC.Chart('chartDiv', {
series: series
});
}
aktualisieren Sie den Browser und Sie haben das Diagramm, das Sie benötigen.
Sie können Ihr Wissen über JavaScript-Diagramme ergänzen mit unser Artikel über Balkendiagramme.
