Highcharts: gráfico circular con leyenda

Highcharts gráfico circular

El siguiente ejemplo demuestra cómo mostrar un gráfico circular con leyenda.

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

---

Configuración

Configuración de series

Establezca el atributo type de series como pie; series.type describe el tipo de serie de datos. El valor predeterminado es "line".

var series = {
   type: 'pie'
};

plotOptions

En plotOptions, use la propiedad plotOptions.pie.showInLegend para establecer si se muestra la leyenda.

var plotOptions = {
   pie: {
      allowPointSelect: true,
      cursor: 'pointer',
      dataLabels: {
         enabled: false           
      },
      showInLegend: true
   }
};

Ejemplo

Nombre de archivo: highcharts_pie_legends.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: null,
       plotShadow: false
   };
   var title = {
      text: 'Browser market shares at a specific website, 2014'   
   };      
   var tooltip = {
      pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
   };
   var plotOptions = {
      pie: {
         allowPointSelect: true,
         cursor: 'pointer',
         dataLabels: {
            enabled: false           
         },
         showInLegend: true
      }
   };
   var series= [{
      type: 'pie',
      name: 'Browser share',
      data: [
         ['Firefox',   45.0],
         ['IE',       26.8],
         {
            name: 'Chrome',
            y: 12.8,
            sliced: true,
            selected: true
         },
         ['Safari',    8.5],
         ['Opera',     6.2],
         ['Others',   0.7]
      ]
   }];     
      
   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 circular

Otras extensiones