Erstellen Sie Ihr erstes interaktives JavaScript-Diagramm

Daten sind überall um uns herum und ihre Visualisierung ist bereits zu einem wesentlichen Bestandteil unseres Lebens geworden. Diagramme, Infografiken, Karten und Dashboards sind heutzutage sehr gefragt, weil sie uns Informationen auf eine leicht interpretierbare Weise präsentieren. Das Gute daran ist, dass für die Erstellung von Diagrammen keine großen Fähigkeiten oder Spezialkenntnisse von Webentwicklern, Designern oder anderen Personen erforderlich sind. In diesem Artikel zeigen wir Ihnen die Grundlagen und erklären Ihnen, wie Sie die interaktive Datenvisualisierung mit JavaScript und HTML5 problemlos handhaben. Wir beginnen mit der Erstellung eines Einzelreihen-Balkendiagramms, damit Sie die Grundlagen verstehen. Dann zeigen wir Ihnen eine schnelle Möglichkeit, Mehrserien- und gestapelte Balkendiagramme zu erstellen. Balkendiagramme sind heutzutage eine beliebte Möglichkeit, Daten darzustellen, und die verwendete Entwicklungslogik lässt sich leicht auf andere Diagrammtypen übertragen. Das endgültige Diagramm wird sein dieses 100 % gestapelte Balkendiagramm:

Siehe den Stift Finale (Titel). Maßgeschneidertes, zu 100 % gestapeltes Balkendiagramm von Ruslan (@ruslankorsar) An CodePen.

Heute gibt es viele JavaScript-Diagrammbibliotheken; einige davon sind absolut kostenlos, wie zum Beispiel D3 Und Google Charts während andere Zahlungen für die kommerzielle Nutzung verlangen. Meiner Meinung nach sind sie die umfassendsten und robustesten amCharts, AnyChartUnd Highcharts. Für dieses Tutorial habe ich mich für die Verwendung entschieden AnyChart. Der Vorgang ist jedoch für jede Bibliothek sehr ähnlich, insbesondere wenn Sie etwas Einfaches erstellen. AnyChart verfügt über umfangreiche Dokumentation Und API-Referenz sowie eine große Auswahl an Unterstützte Diagrammtypen und Demos auf der Code-SpielplatzDaher ist es eine gute Wahl für Anfänger. Zur Vereinfachung sind alle im Tutorial abgebildeten Beispiele in verfügbar Diese Sammlung auf CodePen und kann direkt dort erkundet oder mit CSS/HTML/JavaScript-Demodateien in ZIPs exportiert werden.

Lesen:  Was wissen Sie über die Geschichte der Content-Produktion?

JS-Charting in 3 einfachen Schritten

Der Prozess zum Erstellen eines einfachen JavaScript-Diagramms für Ihre Website oder App besteht aus den folgenden drei Schritten:

  1. Bereiten Sie Ihre Daten vor;
  2. Schließen Sie die Bibliothek an.
  3. Schreiben Sie einen einfachen Code.

1. Daten vorbereiten

So wie ein großes Schiff tiefe Gewässer benötigt, benötigt eine einfache Grafik einfache Daten. Wenn Sie über große Datenmengen verfügen oder deren Struktur nicht offensichtlich ist, müssen Sie diese natürlich zuerst vorbereiten. Beim Erstellen der meisten gängigen Diagrammtypen benötigen wir lediglich X- und Y-Felder. Balkendiagramme können jedoch noch einfacher sein, da es oft vorkommt, dass nur das Y-Feld verwendet wird und ein Index oder eine Artikelnummer als X verwendet wird. Das ist der Fall, wenn wir ein JavaScript-Datenarray verwenden, zum Beispiel: // 5 Datenpunkte = 5 Kategorien für eine einzelne Serie var data = [19, 24, 30, 34, 42]; // Y sind diese Werte; X sind Artikelnummern [0,1,2,3,4,5]

Wenn Sie JSON/XML zur Datenübertragung verwenden, könnten Ihre Daten wie folgt aussehen.

[{
‘x’: ‘Product A’,
‘value’: 19
},{
‘x’: ‘Product B’,
‘value’: 24
}…]

Im Allgemeinen gibt es viele Möglichkeiten, mit Daten zu arbeiten, und Entwickler von Visualisierungssoftware beschreiben normalerweise alle oder viele davon in Dokumenten. Vor diesem Hintergrund empfehle ich, die zu überprüfen entsprechenden Abschnitt der Dokumentation Ihrer Diagrammbibliothek.

2. Eine Diagrammbibliothek erhalten

Die von Ihnen verwendete Bibliothek ist hier offensichtlich ein wichtiger Bestandteil. Wenn Sie Diagramme lokal verwenden möchten, sollte dies sinnvoll sein herunterladen das Binärpaket und bewahren Sie es in der Nähe auf. Wenn Sie jedoch Diagramme für eine Web-App oder eine Seite auf einer Website benötigen, dann a CDN könnte eine bessere Option sein. Die Dateien werden vom nächstgelegenen Server zu Ihrem Client geladen, wodurch die Seite schneller geladen und die Leistung verbessert wird.

3. Einen einfachen HTML/JavaScript-Code schreiben

Wenn unsere Daten und die Bibliothek bereit sind, können wir mit dem Schreiben des Codes beginnen, um unser Diagramm tatsächlich zu zeichnen. a) Zuerst müssen wir einen Diagrammcontainer auf der Seite erstellen. Am besten verwenden Sie a

Element und legen Sie seine ID fest:

b) Danach fügen wir unsere Daten ein: var data = [
{x: ‘DVD player’, y: 19},
{x: ‘Home theater system’, y: 24},
{x: ‘Karaoke player’, y: 30},
{x: ‘Projector’, y: 34},
{x: ‘TV receiver’, y: 42}
]; c) Dann geben wir an, welchen Diagrammtyp wir wollen, indem wir die entsprechende Konstruktorfunktion aufrufen: var chart = anychart.bar(); d) Um es den Betrachtern klarer zu machen, möchte ich dem Diagramm einen Titel geben: chart.title(‘Product Sales’); e) Jetzt erstellen wir eine Reihe: chart.addSeries(data); // oder wir können einen einfachen Datensatz innerhalb der Methode angeben: chart.addSeries([19, 24, 30, 34, 42]); f) Unser Diagramm muss in einen Container gelegt werden, also geben wir den gerade erstellten an: chart.container(‘container’); g) Alles scheint in Ordnung zu sein, also können wir jetzt unser Diagramm zeichnen: chart.draw(); So sieht das Ergebnis aus:

Zur Vereinfachung folgt der gesamte Code:

Sieht ziemlich einfach aus, nicht wahr? Und jetzt können wir den Gesamtumsatz bequem nach Kategorie vergleichen.

Erstellen von Diagrammen mit mehreren Reihen und gestapelten Balken

Nachdem wir nun die Grundlagen der Diagrammerstellung mit JavaScript kennengelernt haben, können wir mit der Erstellung eines etwas komplexeren Diagramms fortfahren, das mehr Informationen anzeigt. Wie bereits erwähnt, zeige ich Ihnen eine einfache Möglichkeit, ein Balkendiagramm mit mehreren Reihen und anschließend ein gestapeltes Diagramm zu erstellen. Grundsätzlich sind die Vorgehensweisen recht ähnlich. Wie immer beginnt alles mit Daten.

Daten aus einer Tabelle

Im Kontext des obigen Balkendiagramms hatten wir eine Variable (die Produktverkaufsdatenreihe) und mehrere Kategorien (Produkttypen). Um zusätzlich die Zusammensetzung jedes Werts anzuzeigen, was das Wesentliche bei gestapelten Balkendiagrammen ist, benötigen wir detailliertere Daten. Hierzu können wir Daten nutzen, die bereits auf der Seite angezeigt werden. Wenn Sie beispielsweise bereits über eine HTML-Tabelle verfügen, können Sie auf dieser Grundlage ganz einfach ein Diagramm erstellen. Wenn Sie AnyCharts verwenden Datenadaptermodul Sie müssen lediglich diese Tabelle als Datenquelle angeben. 1) Holen Sie sich den Datenadapter: 2) Bereiten Sie Daten aus der Tabelle vor: var tableData = anychart.data.parseHtmlTable('#tableWithData'); 3) Erstellen Sie ein Diagramm und geben Sie die Datenquelle an: var chart = anychart.bar(); chart.data(tableData); Das unmittelbare Ergebnis ist ein Balkendiagramm mit mehreren Serien, das uns beispielsweise einen schnellen Vergleich der Leistung jedes Produkts in jeder einzelnen Kategorie ermöglicht.

Ändern des Serientyps

Alle notwendigen Details inklusive Daten sind bereits vorgegeben. Jetzt können wir den Serientyp ändern und aus dem herkömmlichen Diagramm mit mehreren Serien ein gestapeltes Balkendiagramm erstellen. Es ist überhaupt nicht schwierig, da Sie nur eine Codezeile benötigen, um die Werte zu stapeln: chart.yScale().stackMode('values'); Voila!

Wir haben gerade spontan ein gestapeltes Balkendiagramm erstellt, ohne die Konfiguration dieses Multiseriendiagramms tatsächlich zu ändern. Dadurch sind wir jetzt nicht nur in der Lage, die Gesamtverkäufe nach Kategorien zu vergleichen, wie mit dem Einzelserien-Balkendiagramm ganz am Anfang des Artikels, sondern wir können auch identifizieren, welches Produkt dafür verantwortlich ist, dass eine Kategorie insgesamt kleiner oder größer ist als andere . Da wir uns im Voraus darauf geeinigt haben, dass unser Endziel ein zu 100 % gestapeltes Balkendiagramm ist, ändern wir einfach den Modus, um es zu erhalten: chart.yScale().stackMode('percent');

Es handelt sich um ein zu 100 % gestapeltes Balkendiagramm, mit dem Sie Teil-zu-Ganze-Beziehungen hervorheben und den Beitrag jedes Produkts zur Gesamtkategorie bewerten können.

Designanpassung

Design ist bei der Datenvisualisierung sehr wichtig, um Aufmerksamkeit zu erregen, die Klarheit zu verbessern und die visuelle Integrität Ihres Webprojekts aufrechtzuerhalten. Dank dieser Diagrammbibliothek ist die Anpassung recht einfach.

Text hinzufügen

Für mehr Übersichtlichkeit können Sie Ihre Visualisierung mit zusätzlichen Texten versehen. Beispielsweise gebe ich der vertikalen Achse einen Titel und füge vorübergehend eine Diagrammbeschriftung hinzu: chart.xAxis().title('Products'); chart.label({text: 'Classified!'});

Farbeinstellungen

Sie können Farbe über eine Palette hinzufügen (chart.palette()) und ändern Sie die Hintergrundeinstellungen (chart.background()) unter anderem. Oder Sie können ein Thema verwenden: Dann müssen wir es angeben in den Diagrammeinstellungen: anychart.theme(anychart.themes.wines);

Diagramminteraktivität

Ein JavaScript-Diagramm zumindest ein wenig interaktiv zu gestalten, ist keine große Sache. Der wahrscheinlich grundlegendste Ansatz besteht darin, den Hover-Status für Datenpunkte zu aktivieren, sie ihre Farbe ändern zu lassen und/oder Markierungen hinzuzufügen oder zu ändern. Der Auswahlstatus bestimmt, wie jeder Punkt aussieht, nachdem er angeklickt wurde. Einige einfache Hover- und Select-basierte Interaktivität sind standardmäßig enthalten, daher werden wir dem obigen Beispiel im Moment nichts hinzufügen. Bitte kehren Sie dorthin zurück, um die grundlegende Interaktivität zu erkunden, wenn Sie möchten. Erwähnenswert ist das Tooltip-Element, das schweben kann, wenn man mit der Maus über einen Punkt fährt. Ich versuche immer, Tooltips sinnvoll zu nutzen, indem ich sie hilfreiche Informationen darüber anzeigen lasse, zu welcher Serie ein Punkt gehört, welchen Wert er darstellt usw. Sie können Ihre Tooltips ganz einfach anpassen, um alles anzuzeigen. Wir führen den Tooltip ein und legen fest, was darin angezeigt werden soll: var tooltip = chart.tooltip(); tooltip.displayMode('union'); tooltip.textFormatter('{%SeriesName}: {%Value} ({%YPercentOfCategory}%)'); Hier ist das Ergebnis:

Dies ist nur ein kurzer Blick auf die Anpassungsmöglichkeiten, ins Detail zu gehen würde einen ganzen Artikel für sich füllen. Im Moment empfehle ich Ihnen, das zu lesen Interaktivitätsbereich Weitere Informationen finden Sie in der Dokumentation.

Abschluss

Wie Sie sehen, ist es nicht schwierig, mit JavaScript interaktive Diagramme zu erstellen. Darüber hinaus finden Sie alle Beispiele aus dem Tutorial in meinem Sammlung auf CodePen und verwenden Sie sie einfach in Ihrer Arbeit. Kopieren Sie einfach den Code, ändern Sie meine Daten in Ihre und bringen Sie Ihr Projekt sehr schnell zum Laufen. Bitte denken Sie immer daran, die Dokumentation und/oder API-Referenz zu überprüfen und achten Sie auf die Demos der von Ihnen verwendeten Bibliothek, wie z Dies ist die Galerie von AnyChart. Normalerweise ist es nicht kompliziert, herauszufinden, ob etwas Ihren Anforderungen entspricht, ein Beispiel zu finden, das am besten passt, einige einfache Änderungen vorzunehmen und es dann so zu verwenden, wie Sie es benötigen.

Aktuelle Artikel:

Empfohlen