Highcharts 3D柱形圖

配置

chart.options3d 配置

如下列出了 3D 圖的基本配置，設置 chart 的 type 屬性爲 column，options3d 選項可設置三維效果。php

var chart = { type: 'column', options3d: { enabled: true, //顯示圖表是否設置爲3D， 咱們將其設置爲 true alpha: 15, //圖表視圖旋轉角度 beta: 15, //圖表視圖旋轉角度 depth: 50, //圖表的合計深度，默認爲100 viewDistance: 25 //定義圖表的瀏覽長度 } };

實例

文件名：highcharts_3d_column.htmhtml

<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>

jquery

以上實例輸出結果爲：json

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.htmapp

<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>

ide

以上實例輸出結果爲：測試

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.htmthis

<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圓環圖

配置

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   //定義圖表的瀏覽長度
   }
};

plotOptions.pie.innerSize

plotOptions.pie.innerSize 用於繪製餅狀圖時，餅狀圖的圓心預留多大的空白。

plotOptions.pie.depth

3D餅圖的厚度。

plotOptions: {
   pie: {
      innerSize: 100,
      depth: 45
   }
},

實例

文件名：highcharts_3d_donut.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         
      }
   };
   var title = {
      text: '每週水果配送量'   
   };   
   var subtitle = {
      text: 'Highcharts 3D圓環圖'
   };  

   var plotOptions = {
      pie: {
         innerSize: 100,
         depth: 45
      }
   };   
   var series= [{
         name: '配送量',
         data: [
            ['Bananas', 8],
            ['Kiwi', 3],
            ['Mixed nuts', 1],
            ['Oranges', 6],
            ['Apples', 8],
            ['Pears', 4],
            ['Clementines', 4],
            ['Reddish (bag)', 1],
            ['Grapes (bunch)', 1]
         ]
   }];     
      
   var json = {};   
   json.chart = chart; 
   json.title = title;       
   json.subtitle = subtitle; 
   json.plotOptions = plotOptions; 
   json.series = series;   
   $('#container').highcharts(json);
});
</script>
</body>
</html>

以上實例輸出結果爲：

Highcharts 3D柱形圖；Highcharts 堆疊3D柱形圖；Highcharts 3D餅圖；Highcharts 3D圓環圖

Highcharts 3D柱形圖

配置

chart.options3d 配置

實例

Highcharts 帶空值(null)和0的3D柱形圖

配置

chart.options3d 配置

實例

Highcharts 堆疊3D柱形圖

配置

chart.options3d 配置

實例

Highcharts 3D餅圖

配置

chart.options3d 配置

實例

Highcharts 3D圓環圖

配置

chart.options3d 配置

plotOptions.pie.innerSize

plotOptions.pie.depth

實例