Latest web development tutorials

Highcharts bar 3D empilés tableau

Figure Highcharts 3D Figure Highcharts 3D

L'exemple suivant montre 3D barres empilées graphique.

Dans la section précédente, nous savons déjà Highcharts syntaxe de configuration de base. Regardons les autres configurations.

configuration

Configuration chart.options3d

Voici la configuration de base du graphique 3D, réglez graphique de la colonne d'attribut type, l'option options3d pour définir un effet tridimensionnel. 

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

Exemples

Nom du fichier: 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>

L'exemple ci-dessus sortie est:

Figure Highcharts 3D Figure Highcharts 3D