Latest web development tutorials

Highcharts Halbkreis Doughnut

Highcharts Pie Highcharts Pie

Das folgende Beispiel veranschaulicht den Halbkreis donut.

Im vorigen Abschnitt wissen wir bereits Highcharts Basiskonfiguration Syntax. Schauen wir uns die anderen Konfigurationen zu suchen.

Konfiguration

Reihenkonfiguration

Set Reihe von series.type type-Attribut pie beschreibt den Datentyp der Spalte. Der Standardwert ist "Linie". Konfigurieren Kuchen Größe Innenmaß Eigenschaft und setzen Sie Innenmaß: '50% '. 

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

Beispiele

Dateiname: highcharts_pie_semicircle_donut.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: 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>

Das obige Beispiel Ausgabe lautet:

Highcharts Pie Highcharts Pie