Highcharts 3D column chart

Highcharts 3D chart

The following example demonstrates a 3D bar chart.

In the previous chapters, we have learned the basic configuration syntax of Highcharts. Next, let's take a look at other configurations.

---

Configuration

chart.options3d configuration

The following lists the basic configuration for 3D charts. Set the type attribute of chart to column, and the options3d option can set the 3D effect.

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

Example

Filename: highcharts_3d_column.htm

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

Try it Yourself »

The output result of the above example is:

Highcharts 3D chart

other extensions