Highcharts 3D柱形图；Highcharts 堆叠3D柱形图；Highcharts 3D饼图；Highcharts 3D圆环图

Posted xuaijun

tags:

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

Highcharts 3D柱形图

 

配置

chart.options3d 配置

以下列出了 3D 图的基本配置，设置 chart 的 type 属性为 column，options3d 选项可设置三维效果。

var chart = {
   type: \'column\',
   options3d: {
         enabled: true,     //显示图表是否设置为3D， 我们将其设置为 true
         alpha: 15,         //图表视图旋转角度
         beta: 15,          //图表视图旋转角度
         depth: 50,         //图表的合计深度，默认为100
         viewDistance: 25   //定义图表的浏览长度
   }
};

实例

文件名：highcharts_3d_column.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>
<script src="http://code.highcharts.com/highcharts-3d.js"></script>  
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<div id="sliders">
<table>
   <tr><td>Alpha Angle</td><td><input id="R0" type="range" min="0" max="45" value="15"/> <span id="R0-value" class="value"></span></td></tr>
   <tr><td>Beta Angle</td><td><input id="R1" type="range" min="0" max="45" value="15"/> <span id="R1-value" class="value"></span></td></tr>
</table>
</div>
<script language="javascript">
$(document).ready(function() {  
   var chart = {
      renderTo: \'container\',
      type: \'column\',
      margin: 75,
      options3d: {
         enabled: true,
         alpha: 15,
         beta: 15,
         depth: 50,
         viewDistance: 25
      }
   };
   var title = {
      text: \'图表旋转实例\'   
   };
   var subtitle = {
      text: \'通过拖动下面的滑块测试\'  
   };
   
   var plotOptions = {
      column: {
         depth: 25
      }
   };
   var series= [{
      data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
   }];     
      
   var json = {};   
   json.chart = chart; 
   json.title = title;   
   json.subtitle = subtitle;    
   json.series = series;
   json.plotOptions = plotOptions;
   var highchart = new Highcharts.Chart(json);
  
   function showValues() {
      $(\'#R0-value\').html(highchart.options.chart.options3d.alpha);
      $(\'#R1-value\').html(highchart.options.chart.options3d.beta);
   }

   // Activate the sliders
   $(\'#R0\').on(\'change\', function () {
      highchart.options.chart.options3d.alpha = this.value;
      showValues();
      highchart.redraw(false);
   });
   $(\'#R1\').on(\'change\', function () {
      highchart.options.chart.options3d.beta = this.value;
      showValues();
      highchart.redraw(false);
   });

   showValues();
});
</script>
</body>
</html>

以上实例输出结果为：

 

 

Highcharts 带空值(null)和0的3D柱形图

 

配置

chart.options3d 配置

以下列出了 3D 图的基本配置，设置 chart 的 type 属性为 column，options3d 选项可设置三维效果。

var chart = {
   type: \'column\',
   options3d: {
         enabled: true,     //显示图表是否设置为3D， 我们将其设置为 true
         alpha: 15,         //图表视图旋转角度
         beta: 15,          //图表视图旋转角度
         depth: 50,         //图表的合计深度，默认为100
         viewDistance: 25   //定义图表的浏览长度
   }
};

实例

文件名：highcharts_3d_column_null.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>
<script src="http://code.highcharts.com/highcharts-3d.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\',
      margin: 75,
      options3d: {
         enabled: true,
         alpha: 10,
         beta: 25,
         depth: 70
      }
   };
   var title = {
      text: \'带空值的 3D 图\'   
   };
   var subtitle = {
      text: \'注意 0 和 null 的区别\'  
   };
   var xAxis = {
      categories: Highcharts.getOptions().lang.shortMonths
   };
   var yAxis = {
      title: {
         text: null
      }
   };   
   var series= [{
      name: \'Sales\',
      data: [2, 3, null, 4, 0, 5, 1, 4, 6, 3]
   }];     
      
   var json = {};   
   json.chart = chart; 
   json.title = title;   
   json.subtitle = subtitle;    
   json.xAxis = xAxis; 
   json.yAxis = yAxis; 
   json.series = series;   
   $(\'#container\').highcharts(json);
});
</script>
</body>
</html>

以上实例输出结果为：

 

Highcharts 堆叠3D柱形图

 

配置

chart.options3d 配置

以下列出了 3D 图的基本配置，设置 chart 的 type 属性为 column，options3d 选项可设置三维效果。

var chart = {
   type: \'column\',
   options3d: {
         enabled: true,     //显示图表是否设置为3D， 我们将其设置为 true
         alpha: 15,         //图表视图旋转角度
         beta: 15,          //图表视图旋转角度
         depth: 50,         //图表的合计深度，默认为100
         viewDistance: 25   //定义图表的浏览长度
   }
};

实例

文件名：highcharts_3d_stacking.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>
<script src="http://code.highcharts.com/highcharts-3d.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\',
      marginTop: 80,
      marginRight: 40,
      options3d: {
         enabled: true,
         alpha: 15,
         beta: 15,
         viewDistance: 25,
         depth: 40
      }
   };
   var title = {
      text: \'水果总消费量，按类别分组\'   
   };   
   var xAxis = {
      categories: [\'Apples\', \'Oranges\', \'Pears\', \'Grapes\', \'Bananas\']
   };
   var yAxis = {
      allowDecimals: false,
      min: 0,
      title: {
         text: \'水果数量\'
      }
   };  

   var tooltip = {
      headerFormat: \'<b>{point.key}</b><br>\',
      pointFormat: \'<span style="color:{series.color}">\\u25CF</span> {series.name}: {point.y} / {point.stackTotal}\'
   };

   var plotOptions = {
      column: {
         stacking: \'normal\',
         depth: 40
      }
   };   
   var series= [{
         name: \'John\',
            data: [5, 3, 4, 7, 2],
            stack: \'male\'
         }, {
            name: \'Joe\',
            data: [3, 4, 4, 2, 5],
            stack: \'male\'
         }, {
            name: \'Jane\',
            data: [2, 5, 6, 2, 1],
            stack: \'female\'
         }, {
            name: \'Janet\',
            data: [3, 0, 4, 4, 3],
            stack: \'female\'
   }];     
      
   var json = {};   
   json.chart = chart; 
   json.title = title;      
   json.xAxis = xAxis; 
   json.yAxis = yAxis; 
   json.tooltip = tooltip; 
   json.plotOptions = plotOptions; 
   json.series = series;   
   $(\'#container\').highcharts(json);
});
</script>
</body>
</html>

以上实例输出结果为：

 

 

Highcharts 3D饼图

 

配置

chart.options3d 配置

以下列出了 3D 图的基本配置，设置 chart 的 type 属性为 pie，options3d 选项可设置三维效果。

var chart = {
   type: \'pie\',
   options3d: {
         enabled: true,     //显示图表是否设置为3D， 我们将其设置为 true
         alpha: 15,         //图表视图旋转角度
         beta: 15,          //图表视图旋转角度
         depth: 50,         //图表的合计深度，默认为100
         viewDistance: 25   //定义图表的浏览长度
   }
};

实例

文件名：highcharts_3d_pie.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>
<script src="http://code.highcharts.com/highcharts-3d.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: \'pie\',     
      options3d: {
         enabled: true,
         alpha: 45,
         beta: 0
      }
   };
   var title = {
      text: \'2014 年特定网站各浏览器占有率\'   
   };   
   var tooltip = {
      pointFormat: \'{series.name}: <b>{point.percentage:.1f}%</b>\'
   };

   var plotOptions = {
      pie: {
          allowPointSelect: true,
          cursor: \'pointer\',
          depth: 35,
          dataLabels: {
             enabled: true,
             format: \'{point.name}\'
          }
      }
   };   
   var series= [{
         type: \'pie\',
            name: \'Browser share\',
            data: [
                [\'Firefox\',   45.0],
                [\'IE\',       26.8],
                {
                    name: \'Chrome\',
                    y: 12.8,
                    sliced: true,
                    selected: true
                },
                [\'Safari\',    8.5],
                [\'Opera\',     6.2],
                [\'Others\',   0.7]
            ]
   }];     
      
   var json = {};   
   json.chart = chart; 
   json.title = title;       
   json.tooltip = tooltip; 
   json.plotOptions = plotOptions; 
   json.series = series;   
   $(\'#container\').highcharts(json);
});
</script>
</body>
</html>

以上实例输出结果为：

 

 

 

 
 
 
 
 
 
 
 

以上是关于Highcharts 3D柱形图；Highcharts 堆叠3D柱形图；Highcharts 3D饼图；Highcharts 3D圆环图的主要内容，如果未能解决你的问题，请参考以下文章

highcharts，设置堆积柱形图的最小高度？

highcharts，设置堆积柱形图的最小高度？

如何用Highcharts制作柱形图

使用 php 和 Ajax 的 Highcharts 柱形图

JSON中的Highcharts堆积柱形图没有绘制正确的值

Highcharts柱形图直方图在工具提示中显示x范围