Highcharts 区间柱形图 - 学习 Hightcharts

下图是一个 Highcharts 区间柱形图表

配置

配置属性 chart.type 为 'columnrange' 即可显示区间柱状图表

var chart = {
   type: 'columnrange',
   inverted: true
};

范例

下面的代码列出了 Highcharts 区间柱形图表 的基本配置

<!doctype html>
<meta charset="utf-8" />
<title>Highcharts 基础教程 | 简单教程(www.twle.cn)</title>
<script src="https://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<script src="https://cdn.hcharts.cn/highcharts/highcharts-more.js"></script>
<div id="container" style="width: 500px; height: 400px; margin: 0 auto"></div>
<script>
var chart = {
  type: 'columnrange',
 inverted:true
};
var title = {
  text: 'Temperature variation by month'   
};  
var subtitle = {
  text: 'Observed in Vik i Sogn, Norway, 2009'   
};  
var xAxis = {
  categories: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']      
};
var yAxis = {     
  title: {
     text: 'Temperature ( \xB0C )'         
  }      
};
var tooltip = {
  headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
  pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
     '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
  footerFormat: '</table>',
  shared: true,
  useHTML: true
};
var plotOptions = {
  columnrange: {
     dataLabels: {
        enabled: true,
        formatter: function () {
           return this.y + '\xB0C';
        }
     }
  }
};  
var credits = {
  enabled: false
};

var series= [{
    name: 'Temperatures',
    data: [
       [-9.7, 9.4],
       [-8.7, 6.5],
       [-3.5, 9.4],
       [-1.4, 19.9],
       [0.0, 22.6],
       [2.9, 29.5],
       [9.2, 30.7],
       [7.3, 26.5],
       [4.4, 18.0],
       [-3.1, 11.4],
       [-5.2, 10.4],
       [-13.5, 9.8]
    ]
}];     

var options = {};

options.chart = chart;
options.title = title;
options.subtitle = subtitle;
options.xAxis = xAxis;
options.yAxis = yAxis;
options.credits = credits;
options.series = series;
options.tooltip = tooltip;
options.plotOptions = plotOptions;
var chart = Highcharts.chart('container',options);
</script>

运行范例 »

以上范例输出如下