Latest web development tutorials

Highcharts demi-cercle Doughnut

Highcharts Pie Highcharts Pie

L'exemple suivant illustre le beignet demi-cercle.

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

configuration

configuration en série

Set de série du type tarte series.type attribut décrit le type de la colonne de données. La valeur par défaut est "en ligne". Configuration de la taille de la tarte en utilisant la propriété et définir largeur intérieure largeur intérieure: '50% '. 

var series = {
   type: 'pie',
   innerSize: '50%'
};

Exemples

Nom du fichier: highcharts_pie_semicircle_donut.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>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() {  
   var chart = {
       plotBackgroundColor: null,
       plotBorderWidth: 0,
       plotShadow: false
   };
   var title = {
      text: 'Browser<br>shares',
      align: 'center',
      verticalAlign: 'middle',
      y: 50	  
   };      
   var tooltip = {
      pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
   };
   var plotOptions = {
      pie: {
         dataLabels: {
            enabled: true,
            distance: -50,
            style: {
               fontWeight: 'bold',
               color: 'white',
               textShadow: '0px 1px 2px black'
            }
         },
         startAngle: -90,
         endAngle: 90,
         center: ['50%', '75%']
      }
   };
   var series= [{
      type: 'pie',
      name: 'Browser share',
      innerSize: '50%',
      data: [
         ['Firefox',   45.0],
         ['IE',       26.8],
         ['Chrome', 12.8],
         ['Safari',    8.5],
         ['Opera',     6.2],
         {
            name: 'Others',
            y: 0.7,
            dataLabels: {
               enabled: false
            }
         }
      ]
   }];     
      
   var json = {};   
   json.chart = chart; 
   json.title = title;     
   json.tooltip = tooltip;  
   json.series = series;
   json.plotOptions = plotOptions;
   $('#container').highcharts(json);  
});
</script>
</body>
</html>

L'exemple ci-dessus sortie est:

Highcharts Pie Highcharts Pie