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