Highcharts - Gráfico de anillos semicírculo

A continuación se muestra un ejemplo de un gráfico circular básico.

Ya hemos visto la configuración utilizada para dibujar un gráfico en el capítulo Sintaxis de configuración de Highcharts .

A continuación se ofrece un ejemplo de un gráfico circular básico.

Configuraciones

Veamos ahora las configuraciones / pasos adicionales realizados.

serie

Configure el tipo de serie para que sea de tipo circular. series.typedecide el tipo de serie del gráfico. Aquí, el valor predeterminado es "línea". Configure el tamaño del pastel usando innerSize como innerSize: '50% '.

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

Ejemplo

highcharts_pie_semicircle_donut.htm

<html>
   <head>
      <title>Highcharts Tutorial</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
      <script src = "https://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>

Resultado

Verifique el resultado.

↰ Previous page