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