Highcharts gráfico de dona semicircular

Highcharts gráfico de pastel

El siguiente ejemplo demuestra un gráfico de dona semicircular.

En los capítulos anteriores ya hemos aprendido la sintaxis de configuración básica de Highcharts. A continuación, veamos otras configuraciones.

---

Configuración

Configuración de series

Establezca el atributo type de series en pie. series.type describe el tipo de columna de datos. El valor predeterminado es "line". Para configurar el tamaño del gráfico de pastel, use el atributo innerSize y establézcalo como innerSize: '50%'.

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

Ejemplo

Nombre de archivo: highcharts_pie_semicircle_donut.htm

<html>
<head>
<meta charset="UTF-8" />
<title>Highcharts 教程 | Ejemplo(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>
</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>

El resultado del ejemplo anterior es:

Highcharts gráfico de pastel

Otras extensiones