Highcharts gráfico de columnas 3D apiladas

Highcharts gráfico 3D

El siguiente ejemplo demuestra un gráfico de columnas 3D apiladas.

En los capítulos anteriores ya hemos aprendido la sintaxis básica de configuración de Highcharts. A continuación, veamos otras configuraciones.

---

Configuración

Configuración de chart.options3d

A continuación se enumeran las configuraciones básicas de los gráficos 3D. Establezca el atributo type de chart en column; la opción options3d permite configurar el efecto tridimensional.

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

Ejemplo

Nombre de archivo: highcharts_3d_stacking.htm

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

El resultado del ejemplo anterior es:

Highcharts gráfico 3D

Otras extensiones