Highcharts 区间柱形图

一代码
<html>
<head>
<meta charset="UTF-8" />
<title>Highcharts 区间柱形图</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>
   <script src="http://code.highcharts.com/highcharts-more.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: 'columnrange',
     inverted:true
   };
   // 标题
   var title = {
      text: '月温差范围'
   };
   // 子标题
   var subtitle = {
      text: '挪威2009'
   };
   // X轴
   var xAxis = {
      categories: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']
   };
   // Y轴
   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: '温度',
        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 json = {};
   json.chart = chart;
   json.title = title;
   json.subtitle = subtitle;
   json.tooltip = tooltip;
   json.xAxis = xAxis;
   json.yAxis = yAxis;
   json.series = series;
   json.plotOptions = plotOptions;
   json.credits = credits;
   $('#container').highcharts(json);

});
</script>
</body>
</html>
二运行结果
Highcharts 区间柱形图

猜你喜欢
