Highcharts ditumpuk area bagan
Contoh berikut menunjukkan grafik daerah 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 "normal". Jika Anda menonaktifkan penggunaan tumpukan nol. Jika nilai "persen" ditumpuk pers persentase.
var plotOptions = { area: { stacking: 'normal', lineColor: '#666666', lineWidth: 1, marker: { lineWidth: 1, lineColor: '#666666' } } };
contoh
File name: highcharts_area_stacked.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: 'area' }; var title = { text: 'Historic and Estimated Worldwide Population Growth by Region' }; var subtitle = { text: 'Source: Wikipedia.org' }; var xAxis = { categories: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'], tickmarkPlacement: 'on', title: { enabled: false } }; var yAxis = { title: { text: 'Billions' }, labels: { formatter: function () { return this.value / 1000; } } }; var tooltip = { shared: true, valueSuffix: ' millions' }; var plotOptions = { area: { stacking: 'normal', lineColor: '#666666', lineWidth: 1, marker: { lineWidth: 1, lineColor: '#666666' } } }; var credits = { enabled: false }; var series= [{ name: 'Asia', data: [502, 635, 809, 947, 1402, 3634, 5268] }, { name: 'Africa', data: [106, 107, 111, 133, 221, 767, 1766] }, { name: 'Europe', data: [163, 203, 276, 408, 547, 729, 628] }, { name: 'America', data: [18, 31, 54, 156, 339, 818, 1201] }, { name: 'Oceania', data: [2, 2, 2, 6, 13, 30, 46] } ]; var json = {}; json.chart = chart; json.title = title; json.subtitle = subtitle; 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: