Highcharts ist eine Diagrammbibliothek, die in reinem JavaScript geschrieben ist.

Highcharts ermöglicht das einfache und bequeme Hinzufügen interaktiver Diagramme zu Websites oder Webanwendungen.

Highcharts ist für persönliche Studien, persönliche Websites und nichtkommerzielle Zwecke kostenlos.

Highcharts-Grafik Syntax

HighCharts-Funktionen

Kompatibilität – Unterstützt alle gängigen Browser und mobilen Plattformen (Android, iOS usw.).

Mehrere Geräte – Unterstützt mehrere Geräte, z. B. Handheld-Geräte iPhone/iPad, Tablets usw.

Kostenlose Nutzung – Open Source und kostenlos.

Leicht – die Größe der Kernbibliothek von highcharts.j beträgt nur etwa 35 KB.

Einfache Konfiguration – verwenden Sie zum Konfigurieren das JSON-Format.

Dynamisch – kann nach der Generierung des Diagramms geändert werden.

Multidimensional – Unterstützt mehrdimensionale Diagramme

Konfigurations-Eingabeaufforderungstool – Es werden Eingabeaufforderungsinformationen angezeigt, wenn sich die Maus zu einem bestimmten Punkt im Diagramm bewegt.

Zeitleiste – auf Millisekunden genau.

Export – Tabellen können in die Formate PDF/PNG/JPG/SVG exportiert werden.

Ausgabe – Webseiten-Ausgabediagramme.

Zoombar – Wählen Sie den zu vergrößernden Diagrammteil aus und betrachten Sie das Diagramm aus der Nähe.

Externe Daten – Laden Sie dynamische Daten vom Server.

Textdrehung – Unterstützt die Etikettendrehung in jede Richtung.

Highcharts-Grafik Beispiel

<html>
<head>
   <meta charset="UTF-8" />
   <title>Highcharts 教程 | php.cn</title>
   <script src="https://apps.bdimg.com/libs/jquery/2.1.4/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: '城市平均气温'   
   };
   var subtitle = {
      text: 'Source: runoob.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: '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>

Instanz ausführen »

Klicken Sie auf die Schaltfläche „Instanz ausführen“, um die Online-Instanz anzuzeigen