圆环图

Highcharts 饼图Highcharts 饼图

以下实例演示了圆环图。

我们在前面的章节已经了解了 Highcharts 基本配置语法。接下来让我们来看下其他的配置。

配置

chart 配置

设置 chart 的 type 属性为 pie chart.type 描述了图表类型。默认值为 "line"。

var chart = {
   type: ''pie''
};
w♨3♨x♨u♨e.com提供本在线速查手册，请勿盗用！

实例

文件名：highcharts_pie_donut.htm

<html>
<head>
<meta charset="UTF-8" />
<title>Highcharts 教程 | W3xue教程(w3xue.com)</title>
<script src="/js/jquery-2.1.4.min.js"></script>
<script src="/js/hc/highcharts5.0.6.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>
w♨3♨x♨u♨e.com提供本在线速查手册，请勿盗用！

我来试一下

以上实例输出结果为：

Highcharts 饼图Highcharts 饼图