Highcharts kolom ditumpuk kelompok grafik
Contoh berikut menunjukkan kelompok 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: 'normal', dataLabels: { enabled: true, color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white', style: { textShadow: '0 0 3px black' } } } };
seri konfigurasi kolom item data
Konfigurasi dalam tumpukan untuk setiap item kolom data yang sesuai.
series: [{ name: 'John', data: [5, 3, 4, 7, 2], stack: 'male' }]
contoh
File name: highcharts_column_rotated.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: 'Total fruit consumption, grouped by gender' }; var xAxis = { categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'] }; var yAxis ={ allowDecimals: false, min: 0, title: { text: 'Number of fruits' } }; var plotOptions = { column: { stacking: 'normal' } }; var credits = { enabled: false }; var series= [{ name: 'John', data: [5, 3, 4, 7, 2], stack: 'male' }, { name: 'Joe', data: [3, 4, 4, 2, 5], stack: 'male' }, { name: 'Jane', data: [2, 5, 6, 2, 1], stack: 'female' }, { name: 'Janet', data: [3, 0, 4, 4, 3], stack: 'female' }]; var json = {}; json.chart = chart; json.title = title; json.xAxis = xAxis; json.yAxis = yAxis; json.plotOptions = plotOptions; json.credits = credits; json.series = series; $('#container').highcharts(json); }); </script> </body> </html>
Contoh di atas output: