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 Einfaches Kreisdiagramm 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 das JSON-Format zur Konfiguration.

Dynamisch – kann geändert werden, nachdem das Diagramm generiert wurde.

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 Einfaches Kreisdiagramm 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 chart = {
       plotBackgroundColor: null,
       plotBorderWidth: null,
       plotShadow: false
   };
   var title = {
      text: '2014 年各浏览器市场占有比例'   
   };      
   var tooltip = {
      pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
   };
   var plotOptions = {
      pie: {
         allowPointSelect: true,
         cursor: 'pointer',
         dataLabels: {
            enabled: true,
            format: '<b>{point.name}%</b>: {point.percentage:.1f} %',
            style: {
               color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
            }
         }
      }
   };
   var series= [{
      type: 'pie',
      name: 'Browser share',
      data: [
         ['Firefox',   45.0],
         ['IE',       26.8],
         {
            name: 'Chrome',
            y: 12.8,
            sliced: true,
            selected: true
         },
         ['Safari',    8.5],
         ['Opera',     6.2],
         ['Others',   0.7]
      ]
   }];     
      
   var json = {};   
   json.chart = chart; 
   json.title = title;     
   json.tooltip = tooltip;  
   json.series = series;
   json.plotOptions = plotOptions;
   $('#container').highcharts(json);  
});
</script>
</body>
</html>

Instanz ausführen »

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