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