Latest web development tutorials

Highcharts gráfico de barras apiladas en 3D

Figura Highcharts 3D Figura Highcharts 3D

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

En la sección anterior que ya sabemos Highcharts sintaxis de configuración básica. Veamos las otras configuraciones.

configuración

Configuración chart.options3d

A continuación se muestran la configuración básica del gráfico 3D, establecer tabla de columna de atributos del tipo, opción options3d para establecer un efecto tridimensional. 

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

Ejemplos

Nombre del archivo: highcharts_3d_stacking.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: '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>

La salida del ejemplo anterior es:

Figura Highcharts 3D Figura Highcharts 3D