Highcharts tata letak tetap bar chart
Contoh berikut menunjukkan grafik tata letak bar tetap.
Pada bagian sebelumnya kita sudah tahu sintaks konfigurasi dasar Highcharts. Mari kita lihat konfigurasi lainnya. Menambahkan dalam seri pointPlacement dan pointPadding konfigurasi.
series.pointPadding
Mengontrol jarak antara nilai setiap kolom, ketika Highcharts grafik lebar adalah tetap, semakin besar nilai, semakin kecil lebar kolom, sedangkan sebaliknya. Nilai default adalah 0,1
series.pointPlacement
Dalam bagan kolom, ketika pointPlacement diatur ke "on", titik sumbu X ada interval. Jika pointPlacement set "antara", antara kolom dengan tata letak skala.
3.0.2 versi setelah Highcharts, pointPlacement dapat mendukung digital, nilai 0-axis, nilai sekarang dari -0.5 dan nilai interval sebelumnya dan nilai saat ini dari 0,5 untuk nilai interval berikutnya. Tidak seperti teks pilihan pengaturan, pengaturan digital tidak mempengaruhi interval antara sumbu.
series: { name: 'Employees', color: 'rgba(165,170,217,1)', data: [150, 73, 20], pointPadding: 0.3, pointPlacement: -0.2 }
contoh
File name: highcharts_column_fixed.htm
<html> <head> <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: '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>
Contoh di atas output: