✅ Interaktive Charts mit JavaScript und Highcharts

Inhaltsverzeichnis

Highcharts ist eine in HTML5 und reines Javascript geschriebene Bibliothek:

Sehen wir uns an, wie es funktioniert, wie es aufgebaut ist und wie es auf unserer Website implementiert wird.
Verzeichnisaufbau
Zuerst laden wir die ZIP-Datei herunter, die unsere Bibliothek enthält, entpacken sie und können unser Dateiverzeichnis und seine Struktur sehen.

Sehen wir uns an, was jedes Verzeichnis enthält und wofür es verwendet wird:

index.html: Dies ist die HTML-Testseite, mit der Sie Tests durchführen und die Standardoptionen anzeigen können.
Beispiele: Dieser Ordner enthält den gesamten Quellcode für die Beispiele.
Grafik: Dieser Ordner enthält die in den Beispielen verwendeten Bilder.
Export-Server: Dies ist ein Verzeichnis, das die serverseitige Funktion zum Exportieren der Grafiken in ein Bild enthält.
js: Dies ist das Hauptverzeichnis von Highcharts. Jede Javascript-Datei hat zwei Suffixe, die erste .src.js enthält den Quellcode mit Kommentaren darin und die andere .js ist die minimierte Version davon.
Adapter: Hier sind die Plugins, die Sie verwenden können Mootools oder Prototyp Als Frameworks steht in diesem Verzeichnis Folgendes:

exporting.js: Diese Datei bietet uns Funktionen zum Exportieren und Drucken.

Themen: Dieser Ordner enthält eine Reihe von vorgefertigten Javascript-Dateien mit Einstellungen wie Hintergrundfarbe, Stile usw. Wir können eine dieser Dateien für verschiedene Stile in die Grafiken laden.

Sehen wir uns an, wie diese Bibliothek funktioniert und wie sie organisiert ist, und gehen wir zu einem praktischen Beispiel für die Implementierung über Highcharts auf unserer Website.

Zuerst beziehen wir die Bibliotheken der Highcharts, sowie die Bibliotheken von jQuery für zusätzliche Funktionalität:

 Highcharts Erstes Beispiel

Das Kurvendiagramm wird in der Spezifikation des Objekts definiert, das alle Eigenschaften und die Datenreihen enthält.

 var chart = new Highcharts.Chart ({chart: {…}, title: '…'…});

Sobald dieses Objekt erstellt ist, wird die Grafik im Browser angezeigt, innerhalb dieses Objekts gibt es eine Reihe von Optionen, die wir im Folgenden erläutern.
Die Anleitung renderTo weist Highcharts an, ein Diagramm im HTML anzuzeigen, insbesondere immit dem id = "Behälter". Die Option Typ definiert den Typ des Diagramms, die Optionen können sein: Fläche, Linie, Spline usw. In diesem Beispiel verwenden wir Spline.

 chart: {renderTo: 'container', type: 'spline'}

Anschließend legen wir einen Titel und einen Untertitel fest, die oben in der Grafik erscheinen.

 title: {Text: 'Webbrowser …'}, Untertitel: {Text: 'Von 2008 bis heute'},

In der Option der Kategorien im Eigentum der xAchse enthält ein Array mit den Labels jedes Dateneintrags und mit tickIntervalle Wir trennen die Art und Weise, wie diese Etiketten gedruckt werden.

 xAxis: {Kategorien: ['Jan 2008', 'Feb',…. ], tickInterval: 3},

Die Optionen auf dem Grundstück yAchse Sie ermöglichen es uns, den Titel dieser Achse zuzuweisen und den minimalen und maximalen Wert festzulegen, auf den wir unseren Graphen begrenzen.

 yAchse: {title: {text: 'Procentage%'}, min: 0},

Das Eigentum von PlotOptionen Er steuert, wie die einzelnen Datenreihen je nach Art des Diagramms angezeigt werden.

 plotOptions: {series: {lineWidth: 2}},

Die series-Eigenschaft ist das Zentrum des gesamten Konfigurationsobjekts, das die Daten definiert, die das Diagramm füttern.

 Serie: [{Name: 'Internet Explorer', Daten: [54.7, 54.7, 53.9, 54.8, 54.4,…]}, {Name: 'FireFox', Daten: [36.4, 36.5, 37.0, 39.1, 39.8,…] }, {

Nachdem nun alle Teile des Codes erklärt wurden, sehen wir uns an, wie er in unserem Browser aussehen würde.

Schließlich überlasse ich den vollständigen Code, damit Sie ihn selbst testen können und ohne zu vergessen, dass er an jeden Bedarf angepasst werden kann.