Diagramme en anneau 3D Highcharts

L'exemple suivant illustre un diagramme circulaire 3D.

Dans les chapitres précédents, nous avons déjà compris la syntaxe de configuration de base de Highcharts. Voyons maintenant d'autres configurations.

Configuration

Configuration de chart.options3d

La section suivante présente la configuration de base des graphiques 3D. Définissez l'attribut type du graphique sur pie, et l'option options3d peut être utilisée pour définir l'effet tridimensionnel.

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

plotOptions.pie.innerSize

plotOptions.pie.innerSize est utilisé pour spécifier combien d'espace vide est réservé au centre du diagramme circulaire lors du dessin d'un diagramme circulaire.

plotOptions.pie.depth

Épaisseur du diagramme circulaire 3D.

plotOptions: {
   pie: {
      innerSize: 100,
      depth: 45
   }
},

Exemple

Nom du fichier : highcharts_3d_donut.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>
<script language="JavaScript">
$(document).ready(function() {  
   var chart = {      
      type: 'pie',     
      options3d: {
         enabled: true,
         alpha: 45         
      }
   };
   var title = {
      text: '每周水果配送量'   
   };   
   var subtitle = {
      text: 'Highcharts 3D圆环图'
   };  

   var plotOptions = {
      pie: {
         innerSize: 100,
         depth: 45
      }
   };   
   var series= [{
         name: '配送量',
         data: [
            ['Bananas', 8],
            ['Kiwi', 3],
            ['Mixed nuts', 1],
            ['Oranges', 6],
            ['Apples', 8],
            ['Pears', 4],
            ['Clementines', 4],
            ['Reddish (bag)', 1],
            ['Grapes (bunch)', 1]
         ]
   }];     
      
   var json = {};   
   json.chart = chart; 
   json.title = title;       
   json.subtitle = subtitle; 
   json.plotOptions = plotOptions; 
   json.series = series;   
   $('#container').highcharts(json);
});
</script>
</body>
</html>

Le résultat de sortie de l'exemple ci-dessus est :

Graphique 3D Highcharts

autres extensions