Highcharts ditumpuk bagan kolom menggunakan persentase
Contoh berikut menunjukkan penggunaan persentase bagan kolom ditumpuk.
Pada bagian sebelumnya kita sudah tahu sintaks konfigurasi dasar Highcharts. Mari kita lihat konfigurasi lainnya. Tambahkan susun properti di plotOptions di:
konfigurasi
plotOptions: Pilihan data titik
plotOptions digunakan untuk mengatur titik data grafik properti terkait. plotOptions Menurut berbagai jenis grafik, sifat mereka mengatur sedikit berbeda.
pengaturan grafik konfigurasi tumpukan plotOptions.area.stacking sebagai "persen". Jika Anda menonaktifkan penggunaan tumpukan nol.
var plotOptions = {
column: {
stacking: 'percent'
}
};
contoh
File name: highcharts_column_percentage.htm
<html>
<head>
<meta charset="UTF-8" />
<title>Highcharts 教程 | 本教程(w3big.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: '堆叠柱形图'
};
var xAxis = {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
};
var yAxis ={
min: 0,
title: {
text: '水果总消费量'
}
};
var tooltip = {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>',
shared: true
};
var plotOptions = {
column: {
stacking: 'percent'
}
};
var credits = {
enabled: false
};
var series= [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}];
var json = {};
json.chart = chart;
json.title = title;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.tooltip = tooltip;
json.plotOptions = plotOptions;
json.credits = credits;
json.series = series;
$('#container').highcharts(json);
});
</script>
</body>
</html>
Contoh di atas output: