Latest web development tutorials

Highcharts 3D Doughnut

Highcharts 3D Figure Highcharts 3D Figure

The following example demonstrates 3D pie chart.

In the previous section we already know Highcharts basic configuration syntax. Let's look at the other configurations.

Configuration

chart.options3d Configuration

Here are the basic configuration of 3D graph, set chart of the type property pie, options3d option to set a three-dimensional effect. 

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

plotOptions.pie.innerSize

When plotOptions.pie.innerSize used to draw a pie chart, pie chart center to reserve much blank.

plotOptions.pie.depth

3D pie chart thickness. 

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

Examples

File name: highcharts_3d_donut.htm 

<html>
<head>
<meta charset="UTF-8" />
<title>Highcharts 教程 | 本教程(w3big.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>

The above example output is:

Highcharts 3D Figure Highcharts 3D Figure