Latest web development tutorials

Highcharts con valori nulli (null) e un grafico a barre 3D 0

Figura Highcharts 3D Figura Highcharts 3D

L'esempio seguente dimostra con valori nulli (null) e grafico a barre 3D zero.

Nella sezione precedente che già conosciamo Highcharts sintassi di configurazione di base. Diamo un'occhiata ad altre configurazioni.

configurazione

Configurazione chart.options3d

Ecco la configurazione di base del grafico 3D, impostare grafico della colonna type, opzione options3d per impostare un effetto tridimensionale. 

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

Esempi

Nome file: highcharts_3d_column_null.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',
      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>

L'output sopra esempio è:

Figura Highcharts 3D Figura Highcharts 3D