Highcharts: Legende im Kreisdiagramm anzeigen

Highcharts Kreisdiagramm

Das folgende Beispiel zeigt, wie ein Kreisdiagramm mit Legende angezeigt wird.

Wir haben bereits die grundlegende Konfigurationssyntax von Highcharts in den vorherigen Kapiteln kennengelernt. Als Nächstes sehen wir uns andere Konfigurationen an.

Konfiguration

Serienkonfiguration

Setzen Sie das Attribut series.type auf "pie"; series.type beschreibt den Typ der Datenreihe. Der Standardwert ist "line".

var series = {
   type: 'pie'
};

plotOptions

plotOptions verwendet das Attribut plotOptions.pie.showInLegend, um festzulegen, ob die Legende angezeigt wird.

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

Beispiel

Dateiname: highcharts_pie_legends.htm

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

Selbst ausprobieren »

Das Ausgabeergebnis des obigen Beispiels ist:

Highcharts Kreisdiagramm