Highcharts-Säulendiagramm mit festem Layout
Das folgende Beispiel zeigt ein Balkendiagramm mit festem Layout.
In den vorherigen Kapiteln haben wir die grundlegende Konfigurationssyntax von Highcharts kennengelernt. Als Nächstes sehen wir uns andere Konfigurationen an. Fügen Sie die Konfigurationen pointPlacement und pointPadding unter series hinzu.
series.pointPadding
Steuert den Abstandswert zwischen den einzelnen Säulen. Wenn die Highcharts-Diagrammbreite festgelegt ist, gilt: Je größer dieser Wert, desto kleiner die Säulenbreite, und umgekehrt. Der Standardwert ist 0.1.
series.pointPlacement
In Säulendiagrammen haben die Punkte auf der X-Achse keinen Abstand, wenn pointPlacement auf "on" gesetzt ist. Wenn pointPlacement auf "between" gesetzt ist, werden die Säulen entsprechend den Teilstrichen angeordnet.
In Versionen nach Highcharts 3.0.2 kann pointPlacement Zahlen unterstützen. 0 ist der Wert auf der Achse, -0.5 ist das Intervall zwischen dem aktuellen Wert und dem vorherigen Wert, und 0.5 ist das Intervall zwischen dem aktuellen Wert und dem nächsten Wert. Anders als bei Texteinstellungsoptionen wirken sich numerische Einstellungen nicht auf den Abstand zwischen den Achsen aus.
series: {
name: 'Employees',
color: 'rgba(165,170,217,1)',
data: [150, 73, 20],
pointPadding: 0.3,
pointPlacement: -0.2
}
Beispiel
Dateiname: highcharts_column_fixed.htm
<html>
<head>
<title>Highcharts 教程 | Example(example.com)</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: 'Efficiency Optimization by Branch'
};
var xAxis = {
categories: ['Seattle HQ', 'San Francisco', 'Tokyo']
};
var yAxis = [{
min: 0,
title: {
text: 'Employees'
}
}, {
title: {
text: 'Profit (millions)'
},
opposite: true
}];
var legend = {
shadow: false
};
var tooltip = {
shared: true
};
var credits = {
enabled: false
};
var plotOptions = {
column: {
grouping: false,
shadow: false,
borderWidth: 0
}
};
var series= [{
name: 'Employees',
color: 'rgba(165,170,217,1)',
data: [150, 73, 20],
pointPadding: 0.3,
pointPlacement: -0.2
}, {
name: 'Employees Optimized',
color: 'rgba(126,86,134,.9)',
data: [140, 90, 40],
pointPadding: 0.4,
pointPlacement: -0.2
}, {
name: 'Profit',
color: 'rgba(248,161,63,1)',
data: [183.6, 178.8, 198.5],
tooltip: {
valuePrefix: '$',
valueSuffix: ' M'
},
pointPadding: 0.3,
pointPlacement: 0.2,
yAxis: 1
}, {
name: 'Profit Optimized',
color: 'rgba(186,60,61,.9)',
data: [203.6, 198.8, 208.5],
tooltip: {
valuePrefix: '$',
valueSuffix: ' M'
},
pointPadding: 0.4,
pointPlacement: 0.2,
yAxis: 1
}];
var json = {};
json.chart = chart;
json.title = title;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.credits = credits;
json.legend = legend;
json.tooltip = tooltip;
json.plotOptions = plotOptions;
json.series = series;
$('#container').highcharts(json);
});
</script>
</body>
</html>
Das Ausgabeergebnis des obigen Beispiels ist:
Weitere Erweiterungen