Latest web development tutorials

Highcharts Mostrar la leyenda de la empanada

Highcharts Pie Highcharts Pie

El siguiente ejemplo demuestra Mostrar leyenda pastel.

En la sección anterior que ya sabemos Highcharts sintaxis de configuración básica. Veamos las otras configuraciones.

configuración

configuración en serie

El atributo type se establece pastel de serie, la columna series.type describe el tipo de datos. El valor por defecto es "línea". 

var series = {
   type: 'pie'
};

plotOptions

plotOptions utilización de propiedad plotOptions.pie.showInLegend para establecer si se muestra la leyenda. 

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

Ejemplos

Nombre del archivo: highcharts_pie_legends.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: 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>

La salida del ejemplo anterior es:

Highcharts Pie Highcharts Pie