Datenvisualisierung ist zu einem wesentlichen Bestandteil geschäftlicher und unternehmensbezogener Aktivitäten geworden. Ob Diagramme, Infografiken, Karten oder Dashboards – sie alle stellen Informationen leicht lesbar dar. Ein Vorteil moderner Techniken zur Diagrammerstellung besteht darin, dass dafür keine besonderen Fähigkeiten oder Kenntnisse erforderlich sind. Tatsächlich beherrschen nicht nur Entwickler, Designer oder Programmierer diese Fähigkeit. Sie können sogar Java script charts durch Kenntnis der Grundlagen von Java und HTML5.
Bibliotheken zur Diagrammerstellung für JavaScript
Das Erste, was Sie zum Erstellen von JavaScript-Diagrammen benötigen, ist eine Diagrammbibliothek. Diese Bibliothek enthält allerlei Designs und Protokolle zum Erstellen und Extrahieren von Diagrammen für die Datenvisualisierung. Einige davon sind kostenlos, wie D3 und Google Charts. Sie können sie für mehrere Zwecke verwenden, wobei sie von einfach bis halbwegs fortgeschritten reichen. Für die wirklich guten Funktionen müssen Sie jedoch bezahlen. AnyChart, Highcharts und amCharts gehören zu den umfangreichsten Bibliotheken überhaupt.
In diesem Blog konzentrieren wir uns auf AnyChart. Mit AnyChart können Sie Daten umfassend dokumentieren und visualisieren. Es verfügt außerdem über eine umfangreiche API-Referenz und unterstützt verschiedene Diagrammtypen sowie Demos im Code-Spielplatz. Daher ist es eine geeignete Option für Einsteiger.
Wie Sie JavaScript-Diagramme erstellen
Beim Erstellen von Diagrammen können Sie mit JavaScript Werte eingeben und Daten nach Belieben aufbereiten. Sie können jede gewünschte Variable auswählen und einfachen Code schreiben, um sie in einem einfachen Diagramm zu visualisieren. Das kann ein Liniendiagramm oder ein Balkendiagramm sein und umfasst drei Schritte:
Daten für ein JS-Diagramm vorbereiten
Einfache Daten sind der beste Weg. Wenn Sie große Datenmengen verarbeiten, müssen Sie diese vereinfachen. Eine Datenaufbereitung ist daher notwendig. Das heißt, Sie müssen die meisten gängigen Diagrammtypen erstellen. Dazu gehören die X-Achse und dann die Y-Achse. Balkendiagramme sind jedoch noch einfacher, da Sie meist nur die Y-Achse sowie einen Index oder eine Elementnummer benötigen. Mit JavaScript und einem Datenarray erhalten Sie etwa Folgendes:
// 5 Datenpunkte = 5 Kategorien für eine einzelne Reihe
var data = [19, 24, 30, 34, 42];
// Y sind diese Werte; X sind die Elementnummern [0,1,2,3,4,5]
Wenn Sie jedoch JSON/XML zur Datenübertragung verwenden, sollten die Daten wie folgt aussehen:
[{
'x': 'Product A',
'value': 19
},{
'x': 'Product B',
'value': 24
}...]
es gibt viele Möglichkeiten, mit Datenvisualisierungssoftware zu arbeiten, die Entwickler in Dokumentationen vielfach beschreiben. Wenn Sie also neugierig sind, gehen Sie besser die relevanten Abschnitte der Dokumente der Diagrammbibliothek durch.
Sie könnten auch Image Charts verwenden und Ihre Diagramme ganz einfach und ohne Aufwand erstellen lassen.
Eine Diagrammbibliothek beschaffen
Es ist unerlässlich, die richtige Bibliothek zu wählen. Wenn Sie Diagramme lokal verwenden, können Sie das Binärpaket des Diagramms herunterladen. Möchten Sie jedoch Grafiken für Web-Apps oder eine Website erstellen, sollten Sie sich für ein CDN entscheiden. Image Charts bietet zahlreiche Funktionen, wie zum Beispiel das Abrufen der Dateien vom Server, der dem Client am nächsten liegt. Das sorgt letztlich für eine schnellere Ladezeit und eine bessere Performance der Seite.
Der Code sieht ungefähr so aus:
<script src="//cdn.anychart.com/js/latest/anychart.min.js" type="text/javascript"></script>
Einen HTML-/JavaScript-Code schreiben
Der letzte Teil des Diagrammerstellungsprozesses besteht darin, einfachen HTML- oder JavaScript-Code zu schreiben.
Sobald die Datenbibliothek bereit ist, können Sie mit dem Schreiben des Codes zum Zeichnen des Diagramms beginnen.
- Zunächst müssen Sie einen Diagramm-Container auf der Seite selbst erstellen. Am besten verwenden Sie dafür ein <div>-Element und legen die ID fest. So sieht der Code aus:
<div id="container"></div>
- Füge anschließend die folgenden Daten hinzu:
var data = [
{x: 'DVD-Player', y: 19},
{x: 'Heimkinosystem', y: 24},
{x: 'Karaoke-Player', y: 30},
{x: 'Projektor', y: 34},
{x: 'TV-Receiver', y: 42}
];
- Im nächsten Schritt legen Sie fest, welchen Diagrammtyp Sie erstellen möchten. Das können verschiedene Typen sein, etwa ein Liniendiagramm, ein Balkendiagramm, ein Kreisdiagramm usw. Der Code muss die Konstruktorfunktion enthalten:
var chart = anychart.bar();
- Sie müssen auch sicherstellen, dass das Diagramm für die Betrachter klar ist. Denn was nützt es, wenn Sie das Diagramm nicht leicht lesbar machen. Das ist überhaupt das ganze Ziel der Visualisierung. Daher müssen Sie es beschriften und angeben, welche Werte welche Menge darstellen. Beginnen Sie damit, dem Diagramm einen Titel zu geben:
chart.title('Product Sales');
- Erstellen Sie als Nächstes eine Reihe, in der Sie die Werte Ihrer Mengen eintragen und beschriften können. Der Code sieht dann so aus:
chart.addSeries(data);
// oder wir können einen einfachen Datensatz direkt innerhalb der Methode angeben:
chart.addSeries([19, 24, 30, 34, 42]);
- Das Diagramm sollte in einem Container platziert werden, damit das von uns erstellte Diagramm eindeutig festgelegt ist. Der Code sieht dann wie folgt aus:
chart.container('container');
- So, das war's. Jetzt können Sie das Diagramm zeichnen. Fügen Sie diesen Code ein: „chart.draw();"
- das Ergebnis sieht in etwa aus wie ein horizontales Balkendiagramm mit verschiedenen Werten, die durch lange und kurze Balken dargestellt werden.
Der gesamte Code der Sequenz sieht wie folgt aus:
<html>
<head>
<script
src="//cdn.anychart.com/js/latest/anychart.min.js"
type="text/javascript"
></script>
<script>
anychart.onDocumentLoad(function() {
var data = [
{ x: "DVD-Player", y: 19 },
{ x: "Heimkinosystem", y: 24 },
{ x: "Karaoke-Player", y: 30 },
{ x: "Projektor", y: 34 },
{ x: "TV-Receiver", y: 42 }
];
var chart = anychart.bar();
chart.title("Product Sales");
chart.addSeries(data);
chart.container("container");
chart.draw();
});
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
