Highcharts 基本条形图；Highcharts 堆叠条形图；Highcharts 反向条形图

Posted xuaijun

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Highcharts 基本条形图；Highcharts 堆叠条形图；Highcharts 反向条形图相关的知识，希望对你有一定的参考价值。

Highcharts 基本条形图

 

配置

chart 配置

设置 chart 的 type 属性 为 bar ，chart.type 描述了图表类型。默认值为 "line"。

var chart = {
   type: \'bar\'
};

实例

文件名：highcharts_bar_basic.htm

<html>
<head>
<meta charset="UTF-8" />
<title>Highcharts 教程 | 菜鸟教程(runoob.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: \'bar\'
   };
   var title = {
      text: \'Historic World Population by Region\'   
   };
   var subtitle = {
      text: \'Source: Wikipedia.org\'  
   };
   var xAxis = {
      categories: [\'Africa\', \'America\', \'Asia\', \'Europe\', \'Oceania\'],
      title: {
         text: null
      }
   };
   var yAxis = {
      min: 0,
      title: {
         text: \'Population (millions)\',
         align: \'high\'
      },
      labels: {
         overflow: \'justify\'
      }
   };
   var tooltip = {
      valueSuffix: \' millions\'
   };
   var plotOptions = {
      bar: {
         dataLabels: {
            enabled: true
         }
      }
   };
   var legend = {
      layout: \'vertical\',
      align: \'right\',
      verticalAlign: \'top\',
      x: -40,
      y: 100,
      floating: true,
      borderWidth: 1,
      backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || \'#FFFFFF\'),
      shadow: true
   };
   var credits = {
      enabled: false
   };
   
   var series= [{
         name: \'Year 1800\',
            data: [107, 31, 635, 203, 2]
        }, {
            name: \'Year 1900\',
            data: [133, 156, 947, 408, 6]
        }, {
            name: \'Year 2008\',
            data: [973, 914, 4054, 732, 34]      
        }
   ];     
      
   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.legend = legend;
   json.credits = credits;
   $(\'#container\').highcharts(json);
  
});
</script>
</body>
</html>

以上实例输出结果为：

 

Highcharts 堆叠条形图

 

配置

plotOptions

配置图表堆叠使用 plotOptions.series.stacking，并设置为 "normal"。如果禁用堆叠可设置为 null ， "normal" 通过值设置堆叠， "percent" 堆叠则按百分比。

var plotOptions = {
   series: {
      stacking: \'normal\'      
   }
};

实例

文件名：highcharts_bar_stacked.htm

<html>
<head>
<meta charset="UTF-8" />
<title>Highcharts 教程 | 菜鸟教程(runoob.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: \'bar\'
   };
   var title = {
      text: \'Historic World Population by Region\'   
   };
   var subtitle = {
      text: \'Source: Wikipedia.org\'  
   };
   var xAxis = {
      categories: [\'Africa\', \'America\', \'Asia\', \'Europe\', \'Oceania\'],
      title: {
         text: null
      }
   };
   var yAxis = {
      min: 0,
      title: {
         text: \'Population (millions)\',
         align: \'high\'
      },
      labels: {
         overflow: \'justify\'
      }
   };
   var tooltip = {
      valueSuffix: \' millions\'
   };
   var plotOptions = {
      bar: {
         dataLabels: {
            enabled: true
         }
      },
      series: {
         stacking: \'normal\'
      }
   };
   var legend = {
      layout: \'vertical\',
      align: \'right\',
      verticalAlign: \'top\',
      x: -40,
      y: 100,
      floating: true,
      borderWidth: 1,
      backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || \'#FFFFFF\'),
      shadow: true
   };
   var credits = {
      enabled: false
   };
   
   var series= [{
         name: \'Year 1800\',
            data: [107, 31, 635, 203, 2]
        }, {
            name: \'Year 1900\',
            data: [133, 156, 947, 408, 6]
        }, {
            name: \'Year 2008\',
            data: [973, 914, 4054, 732, 34]      
        }
   ];     
      
   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.legend = legend;
   json.credits = credits;
   $(\'#container\').highcharts(json);
  
});
</script>
</body>
</html>

以上实例输出结果为：

 

实例

文件名：highcharts_bar_negative.htm

<html>
<head>
<meta charset="UTF-8" />
<title>Highcharts 教程 | 菜鸟教程(runoob.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: \'bar\'
   };
   var title = {
      text: \'Bar chart with negative values\'   
   };   
   var xAxis = {
      categories: [\'Apples\', \'Oranges\', \'Pears\', \'Grapes\', \'Bananas\']
   };
   var credits = {
      enabled: false
   };
   var series= [{
      name: \'John\',
            data: [5, 3, 4, 7, 2]
        }, {
            name: \'Jane\',
            data: [2, -2, -3, 2, 1]
        }, {
            name: \'Joe\',
            data: [3, 4, 4, -2, 5]
      }
   ];     
      
   var json = {};   
   json.chart = chart; 
   json.title = title; 
   json.xAxis = xAxis;
   json.credits = credits;
   json.series = series;
   $(\'#container\').highcharts(json);
  
});
</script>
</body>
</html>

以上实例输出结果为：

 

以上是关于Highcharts 基本条形图；Highcharts 堆叠条形图；Highcharts 反向条形图的主要内容，如果未能解决你的问题，请参考以下文章

使用带有两个不同 JSON 端点的 Highcharts 向下钻取绘制条形图

使用 HighCharts 的条形图无响应脚本和/或高响应时间

设置组合线和条形图最大宽度的Highcharts失败

Highcharts：如何将图例链接到类别而不是条形系列？

Highcharts：条形重叠的颜色

highcharts的表名