Latest web development tutorials

Highcharts ciambella

Highcharts Pie Highcharts Pie

L'esempio seguente mostra ciambella.

Nella sezione precedente che già conosciamo Highcharts sintassi di configurazione di base. Diamo un'occhiata ad altre configurazioni.

configurazione

configurazione grafico

L'attributo type è impostato chart.type grafico a torta descrive il tipo di grafico. Il valore di default è "linea". 

var chart = {
   type: 'pie'
};

Esempi

Nome file: 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>

L'output sopra esempio è:

Highcharts Pie Highcharts Pie