Highcharts图表之区间柱形图-web建站教程在线编辑器

源代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Highcharts 实例 | web建站教程(ipkd.cn)</title>
	<script src="/js/jquery-1.9.0.min.js"></script>
    
    <script src="/js/highcharts.js"></script>
    <script src="/js/highcharts-more.js"></script>
</head>
<body>
    <div id="myChart" width='100%' height='450'></div>
    <script type="text/javascript">
       $(document).ready(function() {  
           var chart = {
              type: 'columnrange',
             inverted:true
           };
           var title = {
              text: 'Highcharts图表之区间柱形图'   
           };  
           var subtitle = {
              text: 'ipkd.cn'   
           };  
           var xAxis = {
              categories: ['周一','周二','周三','周四','周五','周六','周日']
           };
           var yAxis = {     
              title: {
                 text: '访问量'         
              }      
           };
           var plotOptions = {
              columnrange: {
                 dataLabels: {
                    enabled: true,
                    formatter: function () {
                       return this.y + '\xB0C';
                    }
                 }
              }
           };  
           var credits = {
              enabled: false
           };
           
           var series= [{
                name: '访问量',
                data: [
                   [-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]
                ]
           }];     
              
           var json = {};   
           json.chart = chart; 
           json.title = title;   
           json.subtitle = subtitle; 
           json.xAxis = xAxis;
           json.yAxis = yAxis;  
           json.series = series;
           json.plotOptions = plotOptions;  
           json.credits = credits;
           $('#myChart').highcharts(json);
          
        });
    </script>
</body>
</html>

源代码：点击运行 》

运行结果：

源代码：