Highcharts ist eine in reinem JavaScript geschriebene Diagrammbibliothek.
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.
Einfaches Säulendiagramm von Highcharts 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.
Einfaches Säulendiagramm von Highcharts Beispiel
<html>
<head>
<meta charset="UTF-8" />
<title>Highcharts 教程 | php.cn</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://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 = {
type: 'column'
};
var title = {
text: '每月平均降雨量'
};
var subtitle = {
text: 'Source: runoob.com'
};
var xAxis = {
categories: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
crosshair: true
};
var yAxis = {
min: 0,
title: {
text: '降雨量 (mm)'
}
};
var tooltip = {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
};
var plotOptions = {
column: {
pointPadding: 0.2,
borderWidth: 0
}
};
var credits = {
enabled: false
};
var series= [{
name: 'Tokyo',
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}, {
name: 'New York',
data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]
}, {
name: 'London',
data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]
}, {
name: 'Berlin',
data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
}];
var json = {};
json.chart = chart;
json.title = title;
json.subtitle = subtitle;
json.tooltip = tooltip;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.series = series;
json.plotOptions = plotOptions;
json.credits = credits;
$('#container').highcharts(json);
});
</script>
</body>
</html>Instanz ausführen »
Klicken Sie auf die Schaltfläche „Instanz ausführen“, um die Online-Instanz anzuzeigen