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.
Highcharts-Balkendiagramm 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-Balkendiagramm 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 = {
type: 'bar'
};
var title = {
text: 'Historic World Population by Region'
};
var subtitle = {
text: 'Source: Wikipedia.org'
};
var xAxis = {
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
title: {
text: null
}
};
var yAxis = {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify'
}
};
var tooltip = {
valueSuffix: ' millions'
};
var plotOptions = {
bar: {
dataLabels: {
enabled: true
}
}
};
var legend = {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true
};
var credits = {
enabled: false
};
var series= [{
name: 'Year 1800',
data: [107, 31, 635, 203, 2]
}, {
name: 'Year 1900',
data: [133, 156, 947, 408, 6]
}, {
name: 'Year 2008',
data: [973, 914, 4054, 732, 34]
}
];
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.legend = legend;
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