Highcharts-Balkendiagramm
Übersetzungsergebnisse：
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-BalkendiagrammSyntax
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-BalkendiagrammBeispiel
<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