Latest web development tutorials

Highcharts Doughnut

Highcharts Pie Highcharts Pie

Das folgende Beispiel zeigt Doughnut.

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

Konfiguration

Chart-Konfiguration

Das type-Attribut gesetzt Kreisdiagramm chart.type beschreibt den Diagrammtyp. Der Standardwert ist "Linie". 

var chart = {
   type: 'pie'
};

Beispiele

Dateiname: highcharts_pie_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 colors = Highcharts.getOptions().colors;
   var categories = ['MSIE', 'Firefox', 'Chrome', 'Safari', 'Opera'];
   var data = [{
            y: 55.11,
            color: colors[0],
            drilldown: {
                name: 'MSIE versions',
                categories: ['MSIE 6.0', 'MSIE 7.0', 'MSIE 8.0', 'MSIE 9.0'],
                data: [10.85, 7.35, 33.06, 2.81],
                color: colors[0]
            }
        }, {
            y: 21.63,
            color: colors[1],
            drilldown: {
                name: 'Firefox versions',
                categories: ['Firefox 2.0', 'Firefox 3.0', 'Firefox 3.5', 'Firefox 3.6', 'Firefox 4.0'],
                data: [0.20, 0.83, 1.58, 13.12, 5.43],
                color: colors[1]
            }
        }, {
            y: 11.94,
            color: colors[2],
            drilldown: {
                name: 'Chrome versions',
                categories: ['Chrome 5.0', 'Chrome 6.0', 'Chrome 7.0', 'Chrome 8.0', 'Chrome 9.0',
                    'Chrome 10.0', 'Chrome 11.0', 'Chrome 12.0'],
                data: [0.12, 0.19, 0.12, 0.36, 0.32, 9.91, 0.50, 0.22],
                color: colors[2]
            }
        }, {
            y: 7.15,
            color: colors[3],
            drilldown: {
                name: 'Safari versions',
                categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
                    'Safari 3.1', 'Safari 4.1'],
                data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14],
                color: colors[3]
            }
        }, {
            y: 2.14,
            color: colors[4],
            drilldown: {
                name: 'Opera versions',
                categories: ['Opera 9.x', 'Opera 10.x', 'Opera 11.x'],
                data: [ 0.12, 0.37, 1.65],
                color: colors[4]
            }
        }];
   var browserData = [];
   var versionsData = [];
   var i, j;
   var dataLen = data.length;
   var drillDataLen;
   var brightness;


   // Build the data arrays
   for (i = 0; i < dataLen; i += 1) {
      // add browser data
      browserData.push({
         name: categories[i],
         y: data[i].y,
         color: data[i].color
      });

      // add version data
      drillDataLen = data[i].drilldown.data.length;
      for (j = 0; j < drillDataLen; j += 1) {
         brightness = 0.2 - (j / drillDataLen) / 5;
         versionsData.push({
            name: data[i].drilldown.categories[j],
            y: data[i].drilldown.data[j],
            color: Highcharts.Color(data[i].color).brighten(brightness).get()
         });
      }
   }

   var chart = {
      type: pie
   };
   var title = {
      text: 'Browser market share, April, 2011'
   };      
   var yAxis = {
      title: {
         text: 'Total percent market share'
      }
   };
   var tooltip = {
      valueSuffix: '%'
   };
   var plotOptions = {
      pie: {
         shadow: false,
         center: ['50%', '50%']
      }
   };
   var series= [{
      name: 'Browsers',
            data: browserData,
            size: '60%',
            dataLabels: {
                formatter: function () {
                    return this.y > 5 ? this.point.name : null;
                },
                color: 'white',
                distance: -30
            }
        }, {
            name: 'Versions',
            data: versionsData,
            size: '80%',
            innerSize: '60%',
            dataLabels: {
                formatter: function () {
                    // display only if larger than 1
                    return this.y > 1 ? '' + this.point.name + ': ' + this.y + '%'  : null;
                }
            }
        }   
   ];     
      
   var json = {};   
   json.chart = chart; 
   json.title = title;  
   json.yAxis = yAxis;        
   json.tooltip = tooltip;  
   json.series = series;
   json.plotOptions = plotOptions;
   $('#container').highcharts(json);  
});
</script>
</body>
</html>

Das obige Beispiel Ausgabe lautet:

Highcharts Pie Highcharts Pie