Highcharts - Kurzanleitung

Highchartsist eine reine JavaScript-basierte Diagrammbibliothek, die Webanwendungen durch Hinzufügen interaktiver Diagrammfunktionen verbessern soll. Es unterstützt eine Vielzahl von Diagrammen. Diagramme werden mit SVG in Standardbrowsern wie Chrome, Firefox, Safari und Internet Explorer (IE) erstellt. In Legacy IE 6 wird VML zum Zeichnen der Grafiken verwendet.

Funktionen der Highcharts Library

Lassen Sie uns nun einige wichtige Funktionen der Highcharts Library diskutieren.

• Compatability - Funktioniert problemlos auf allen gängigen Browsern und mobilen Plattformen wie Android und iOS.

• Multitouch Support - Unterstützt Multitouch auf Touchscreen-basierten Plattformen wie Android und iOS.Ideal für iPhone / iPad und Android-basierte Smartphones / Tablets.

• Free to Use - Open Source und kann kostenlos für nichtkommerzielle Zwecke verwendet werden.

• Lightweight - Die Kernbibliothek von highcharts.js mit einer Größe von fast 35 KB ist eine extrem leichte Bibliothek.

• Simple Configurations - Verwendet json, um verschiedene Konfigurationen der Diagramme zu definieren und ist sehr einfach zu erlernen und zu verwenden.

• Dynamic - Ermöglicht das Ändern des Diagramms auch nach der Diagrammgenerierung.

• Multiple axes- Nicht auf die x-, y-Achse beschränkt. Unterstützt mehrere Achsen in den Diagrammen.

• Configurable tooltips- Tooltip wird angezeigt, wenn ein Benutzer über einen beliebigen Punkt in einem Diagramm schwebt. Highcharts bietet einen integrierten Tooltip-Formatierer oder Callback-Formatierer, um den Tooltip programmgesteuert zu steuern.

• DateTime support- Datum und Uhrzeit speziell behandeln. Bietet zahlreiche integrierte Steuerelemente für datumsbezogene Kategorien.

• Export - Exportieren Sie das Diagramm in das PDF / PNG / JPG / SVG-Format, indem Sie die Exportfunktion aktivieren.

• Print - Diagramm über Webseite drucken.

• Zoomablity - Unterstützt das Zoomen von Diagrammen, um Daten genauer anzuzeigen.

• External data- Unterstützt das dynamische Laden von Daten vom Server. Bietet Kontrolle über Daten mithilfe von Rückruffunktionen.

• Text Rotation - Unterstützt die Drehung von Etiketten in jede Richtung.

Unterstützte Diagrammtypen

Die Highcharts-Bibliothek bietet die folgenden Diagrammtypen:

Sr.Nr.	Diagrammtyp & Beschreibung
1	Line Charts Wird zum Zeichnen von Linien- / Spline-basierten Diagrammen verwendet.
2	Area Charts Wird zum Zeichnen von flächenbezogenen Diagrammen verwendet.
3	Pie Charts Wird zum Zeichnen von Kreisdiagrammen verwendet.
4	Scatter Charts Wird zum Zeichnen von verstreuten Diagrammen verwendet.
5	Bubble Charts Wird zum Zeichnen von blasenbasierten Diagrammen verwendet.
6	Dynamic Charts Wird zum Zeichnen dynamischer Diagramme verwendet, in denen der Benutzer Diagramme ändern kann.
7	Combinations Wird zum Zeichnen von Kombinationen verschiedener Diagramme verwendet.
8	3D Charts Wird zum Zeichnen von 3D-Diagrammen verwendet.
9	Angular Gauges Wird zum Zeichnen von Tacho-Diagrammen verwendet.
10	Heat Maps Wird zum Zeichnen von Heatmaps verwendet.
11	Tree Maps Wird zum Zeichnen von Baumkarten verwendet.

In unseren folgenden Kapiteln werden wir jeden Typ der oben genannten Diagramme anhand von Beispielen ausführlich erläutern.

Lizenz

Highcharts ist Open Source und kann kostenlos für nichtkommerzielle Zwecke verwendet werden. Um Highcharts in kommerziellen Projekten zu verwenden, folgen Sie dem Link - Lizenz und Preise

In diesem Kapitel wird erläutert, wie Sie die Highcharts-Bibliothek für die Entwicklung von Webanwendungen einrichten.

Highcharts erfordern jQuery als Abhängigkeit. Zuerst installieren wir die jQuery-Bibliothek und dann die Highcharts-Bibliothek.

Installieren Sie jQuery

Es gibt zwei Möglichkeiten, jQuery zu verwenden.

• Download- Laden Sie es lokal von jQuery.com herunter und verwenden Sie es.

• CDN access- Sie haben auch Zugriff auf ein CDN. Mit dem CDN erhalten Sie weltweit Zugang zu regionalen Rechenzentren. In diesem Fall Google Host. Dies bedeutet, dass durch die Verwendung von CDN die Verantwortung für das Hosten von Dateien von Ihren eigenen Servern auf eine Reihe externer übertragen wird. Dies bietet auch den Vorteil, dass der Besucher Ihrer Webseite, wenn er bereits eine Kopie von jQuery von demselben CDN heruntergeladen hat, diese nicht erneut herunterladen muss.

Verwenden von heruntergeladener jQuery

Fügen Sie die jQuery-JavaScript-Datei mit dem folgenden Skript in die HTML-Seite ein:

<head>
   <script src = "/jquery/jquery.min.js"></script>
</head>

CDN verwenden

In diesem Tutorial verwenden wir die CDN-Versionen der jQuery-Bibliothek.

Fügen Sie die jQuery-JavaScript-Datei mit dem folgenden Skript in die HTML-Seite ein:

<head>
   <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
   </script>
</head>

Installieren Sie Highcharts

Im Folgenden sind die beiden Möglichkeiten zur Verwendung von Highcharts aufgeführt.

• Download - Laden Sie es lokal von herunter highcharts.com und benutze es.

• CDN access- Sie haben auch Zugriff auf ein CDN. Mit dem CDN haben Sie weltweit Zugang zu regionalen Rechenzentren. In diesem Fall ist der Highcharts-Host - Code.Highcharts.Com.

Heruntergeladene Highcharts verwenden

Fügen Sie die Highcharts-JavaScript-Datei mit dem folgenden Skript in die HTML-Seite ein:

<head>
   <script src = "/highcharts/highcharts.js"></script>
</head>

CDN verwenden

In diesem Tutorial verwenden wir die CDN-Versionen der Highcharts-Bibliothek.

Fügen Sie die Highcharts-JavaScript-Datei mit dem folgenden Skript in die HTML-Seite ein:

<head>
   <script src = "https://code.highcharts.com/highcharts.js"></script>
</head>

In diesem Kapitel wird die Konfiguration vorgestellt, die zum Zeichnen eines Diagramms mithilfe der Highcharts-API erforderlich ist.

Schritt 1: HTML-Seite erstellen

Erstellen Sie eine HTML-Seite mit den Javascript-Bibliotheken jQuery und Highcharts.

HighchartsTestHarness.htm

<html>
   <head>
      <title>Highcharts Tutorial</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
      <script src = "https://code.highcharts.com/highcharts.js"></script>
   </head>
   
   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto"></div>
      
      <script language = "JavaScript">
         $(document).ready(function() {
         });
      </script>
      
   </body>
</html>

Hier das container div wird verwendet, um das mit der Highcharts-Bibliothek gezeichnete Diagramm zu enthalten.

Schritt 2: Konfigurationen erstellen

Die Highcharts-Bibliothek verwendet sehr einfache Konfigurationen mit JSON-Syntax.

$('#container').highcharts(json);

Hier stellt json die json-Daten und -Konfigurationen dar, mit denen die Highcharts-Bibliothek mithilfe der highcharts () -Methode ein Diagramm innerhalb des Container-Div zeichnet. Jetzt konfigurieren wir die verschiedenen Parameter, um die erforderliche JSON-Zeichenfolge zu erstellen.

Titel

Konfigurieren Sie den Titel des Diagramms.

var title = {
   text: 'Monthly Average Temperature'   
};

Untertitel

Konfigurieren Sie den Untertitel des Diagramms.

var subtitle = {
   text: 'Source: WorldClimate.com'
};

xAxis

Konfigurieren Sie den Ticker, der auf der X-Achse angezeigt werden soll.

var xAxis = {
   categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'
      ,'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
};

yAxis

Konfigurieren Sie den Titel und die Plotlinien, die auf der Y-Achse angezeigt werden sollen.

var yAxis = {
   title: {
      text: 'Temperature (\xB0C)'
   },
   plotLines: [{
      value: 0,
      width: 1,
      color: '#808080'
   }]
};

Tooltip

Konfigurieren Sie den Tooltip. Setzen Sie das nach dem Wert hinzuzufügende Suffix (y-Achse).

var tooltip = {
   valueSuffix: '\xB0C'
}

Legende

Konfigurieren Sie die Legende so, dass sie zusammen mit anderen Eigenschaften auf der rechten Seite des Diagramms angezeigt wird.

var legend = {
   layout: 'vertical',
   align: 'right',
   verticalAlign: 'middle',
   borderWidth: 0
};

Serie

Konfigurieren Sie die Daten, die im Diagramm angezeigt werden sollen. Serie ist ein Array, bei dem jedes Element dieses Arrays eine einzelne Linie im Diagramm darstellt.

var series = [
   {
      name: 'Tokyo',
      data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
   }, 
   {
      name: 'New York',
      data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
   }, 
   {
      name: 'Berlin',
      data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
   }, 
   {
      name: 'London',
      data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
   }
];

Schritt 3: Erstellen Sie die JSON-Daten

Kombinieren Sie alle Konfigurationen.

var json = {};

json.title = title;
json.subtitle = subtitle;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.tooltip = tooltip;
json.legend = legend;
json.series = series;

Schritt 4: Zeichnen Sie das Diagramm

$('#container').highcharts(json);

Beispiel

Betrachten Sie das folgende Beispiel, um die Konfigurationssyntax besser zu verstehen:

highcharts_configuration.htm

<html>
   <head>
      <title>Highcharts Tutorial</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
      <script src = "https://code.highcharts.com/highcharts.js"></script> 
   </head>
   
   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto"></div>
      <script language = "JavaScript">
         $(document).ready(function() {
            var title = {
               text: 'Monthly Average Temperature'   
            };
            var subtitle = {
               text: 'Source: WorldClimate.com'
            };
            var xAxis = {
               categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                  'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            };
            var yAxis = {
               title: {
                  text: 'Temperature (\xB0C)'
               },
               plotLines: [{
                  value: 0,
                  width: 1,
                  color: '#808080'
               }]
            };   

            var tooltip = {
               valueSuffix: '\xB0C'
            }
            var legend = {
               layout: 'vertical',
               align: 'right',
               verticalAlign: 'middle',
               borderWidth: 0
            };
            var series =  [{
                  name: 'Tokyo',
                  data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2,
                     26.5, 23.3, 18.3, 13.9, 9.6]
               }, 
               {
                  name: 'New York',
                  data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 
                     24.1, 20.1, 14.1, 8.6, 2.5]
               }, 
               {
                  name: 'Berlin',
                  data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6,
                     17.9, 14.3, 9.0, 3.9, 1.0]
               }, 
               {
                  name: 'London',
                  data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 
                     16.6, 14.2, 10.3, 6.6, 4.8]
               }
            ];

            var json = {};
            json.title = title;
            json.subtitle = subtitle;
            json.xAxis = xAxis;
            json.yAxis = yAxis;
            json.tooltip = tooltip;
            json.legend = legend;
            json.series = series;

            $('#container').highcharts(json);
         });
      </script>
   </body>
   
</html>

Ergebnis

Überprüfen Sie das Ergebnis.

Liniendiagramme werden zum Zeichnen von Linien- / Spline-basierten Diagrammen verwendet. In diesem Abschnitt werden die verschiedenen Arten von linien- und splinebasierten Diagrammen erläutert.

Sr.Nr.	Diagrammtyp & Beschreibung
1	Grundlinie Grundlegendes Liniendiagramm.
2	Mit Datenbeschriftungen Diagramm mit Datenbeschriftungen.
3	Ajax lud Daten, anklickbare Punkte Diagramm nach dem Abrufen von Daten vom Server gezeichnet.
4	Zeitreihen, zoombar Diagramm mit Zeitreihen.
5	Spline mit umgekehrten Achsen Spline-Diagramm mit umgekehrten Achsen.
6	Spline mit Symbolen Spline-Diagramm mit Symbolen für Hitze / Regen.
7	Spline mit Handlungsbändern Spline-Diagramm mit Plotbändern.
8	Zeitdaten mit unregelmäßigen Intervallen Diagramm eines großen Satzes zeitbasierter Daten.
9	Logarithmische Achse Diagramm mit Darstellung der logarithmischen Achse.

Flächendiagramme werden zum Zeichnen von flächenbasierten Diagrammen verwendet. In diesem Abschnitt werden die verschiedenen Arten von flächenbasierten Diagrammen erläutert.

Sr.Nr.	Diagrammtyp & Beschreibung
1	Grundbereich Grundlegendes Flächendiagramm.
2	Bereich mit negativen Werten Flächendiagramm mit negativen Werten.
3	Gestapelter Bereich Diagramm mit übereinander gestapelten Bereichen.
4	Prozentuale Fläche Diagramm mit Daten in Prozent.
5	Bereich mit fehlenden Punkten Diagramm mit fehlenden Punkten in den Daten.
6	Umgekehrte Achsen Fläche mit umgekehrten Achsen.
7	Area-Spline Flächendiagramm mit Spline.
8	Bereichsbereich Flächendiagramm mit Bereichen.
9	Bereichsbereich und Linie Flächendiagramm mit Bereich und Linie.

Balkendiagramme werden zum Zeichnen von flächenbasierten Diagrammen verwendet. In diesem Abschnitt werden die verschiedenen Arten von Balkendiagrammen erläutert.

Sr.Nr.	Diagrammtyp & Beschreibung
1	Basic Bar Grundlegendes Balkendiagramm.
2	Gestapelte Bar Balkendiagramm mit übereinander gestapeltem Balken.
3	Negativ gestapelter Bereich Balkendiagramm mit negativem Stapel.

Säulendiagramme werden zum Zeichnen spaltenbasierter Diagramme verwendet. In diesem Abschnitt werden die verschiedenen Arten von spaltenbasierten Diagrammen erläutert.

Sr.Nr.	Diagrammtyp & Beschreibung
1	Grundlegende Spalte Grundlegendes Säulendiagramm.
2	Spalte mit negativen Werten Säulendiagramm mit negativen Werten.
3	Gestapelte Säule Diagramm mit übereinander gestapelten Spalten.
4	Gestapelte und gruppierte Spalte Diagramm mit Spalte in gestapelter und gruppierter Form.
5	Spalte mit gestapeltem Prozentsatz Diagramm mit gestapeltem Prozentsatz.
6	Säule mit gedrehten Etiketten Säulendiagramm mit gedrehten Beschriftungen in Spalten.
7	Spalte mit Drilldown Säulendiagramm mit Drilldown-Funktion.
8	Säule mit fester Platzierung Säulendiagramm mit fester Platzierung.
9	In der HTML-Tabelle definierte Daten Säulendiagramm mit in der HTML-Tabelle definierten Daten.
10	Spaltenbereich Säulendiagramm mit Bereichen.

Kreisdiagramme werden zum Zeichnen von Kreisdiagrammen verwendet. In diesem Abschnitt werden die verschiedenen Arten von Kreisdiagrammen erläutert.

Sr.Nr.	Diagrammtyp & Beschreibung
1	Basic Pie Grundlegendes Kreisdiagramm.
2	Kuchen mit Legenden Kreisdiagramm mit Legenden.
3	Donut Chart Donut Chart.
4	Halbkreis Donut Halbkreis Donut Diagramm.
5	Kuchen mit Drilldown Kreisdiagramm mit Drilldown-Funktion.
6	Kreisdiagramm mit Farbverlauf Kreisdiagramm mit Verlaufsfüllung.
7	Kreisdiagramm mit Monochrom Kreisdiagramm mit monochromer Füllung.

Streudiagramme werden verwendet, um streuungsbasierte Diagramme zu zeichnen. In diesem Abschnitt werden die verschiedenen Arten von streuungsbasierten Diagrammen erläutert.

Sr.Nr.	Diagrammtyp & Beschreibung
1	Streudiagramm Streudiagramm.

Blasendiagramme werden verwendet, um blasenbasierte Diagramme zu zeichnen. In diesem Abschnitt werden die verschiedenen Arten von blasenbasierten Diagrammen erläutert.

Sr.Nr.	Diagrammtyp & Beschreibung
1	Blasendiagramm Blasendiagramm.
2	3D-Blasendiagramm 3D-Blasendiagramm.

Dynamische Diagramme werden zum Zeichnen datenbasierter Diagramme verwendet, bei denen sich die Daten nach dem Rendern des Diagramms ändern können. In diesem Abschnitt werden die verschiedenen Arten von dynamischen Diagrammen erläutert.

Sr.Nr.	Diagrammtyp & Beschreibung
1	Spline wird jede Sekunde aktualisiert Spline-Diagramm wird jede Sekunde aktualisiert.
2	Klicken Sie, um einen Punkt hinzuzufügen Diagramm mit Punktadditionsfunktion.

Kombinationsdiagramme werden verwendet, um gemischte Diagramme zu zeichnen. Zum Beispiel Balkendiagramm mit Kreisdiagramm. In diesem Abschnitt werden die verschiedenen Arten von Kombinationsdiagrammen erläutert.

Sr.Nr.	Diagrammtyp & Beschreibung
1	Spalte, Linie und Torte Diagramm mit Spalte, Linie und Kreis.
2	Doppelachsen, Linie und Spalte Diagramm mit zwei Achsen, Linie und Spalte.
3	Mehrere Achsen Diagramm mit mehreren Achsen.
4	Mit Regressionslinie streuen Streudiagramm mit Regressionslinie.

3D-Diagramme werden zum Zeichnen dreidimensionaler Diagramme verwendet. In diesem Abschnitt werden die verschiedenen Arten von 3D-Diagrammen erläutert.

Sr.Nr.	Diagrammtyp & Beschreibung
1	3D-Spalte 3D-Säulendiagramm.
2	3D-Spalte mit null 3D-Säulendiagramm mit Null- und 0-Werten.
3	3D-Säule mit Stapelung 3D-Säulendiagramm mit Stapeln und Gruppieren.
4	3D Pie 3D-Kreisdiagramm.
5	3D Donut 3D Donut Chart.

Winkelmessdiagramme werden zum Zeichnen von Mess- / Messdiagrammen verwendet. In diesem Abschnitt werden die verschiedenen Arten von Winkelmessdiagrammen erläutert.

Sr.Nr.	Diagrammtyp & Beschreibung
1	Winkelmesser Winkelmessdiagramm.
2	Feste Spurweite Solid Gauge Chart.
3	Uhr Uhr.
4	Messgerät mit zwei Achsen Messkarte mit zwei Achsen.
5	VU-Meter VU Meter Chart.

Heatmap-Diagramme werden zum Zeichnen von Heatmap-Diagrammen verwendet. In diesem Abschnitt werden die verschiedenen Arten von Heatmaps erläutert.

Sr.Nr.	Diagrammtyp & Beschreibung
1	Heat Map Heat Map.
2	Große Wärmekarte Große Wärmekarte.

Baumkartendiagramme werden zum Zeichnen von Baumkartendiagrammen verwendet. In diesem Abschnitt werden die verschiedenen Arten von Baumkarten erläutert.

Sr.Nr.	Diagrammtyp & Beschreibung
1	Baumkarte Baumkarte mit Farbachse.
2	Baumkarte mit Ebenen Baumkarte mit Ebenen.
3	Große Baumkarte Große Baumkarte.