饼图

下表列出了 Highcharts 不同类型的饼图：

基本饼图

series 配置

设置 series 的 type 属性为 pie ，series.type 描述了数据列类型。默认值为 "line"。

var series = {
   type: 'pie'
};

实例

显示图例饼图

圆环图

chart 配置

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

var chart = {
   type: 'pie'
};

实例

半圈圆环图

series 配置

设置 series 的 type 属性为 pie series.type 描述了数据列类型。默认值为 "line"。配置饼图大小使用 innerSize 属性并设置为innerSize: '50%'。

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

实例

向下钻取饼图

drilldown 配置

drilldown 用于向下钻取数据，通过点击某项深入到其中的具体数据。

drilldown: {
   series: drilldownSeries
}

实例

渐变饼图

colors 配置

使用 Highcharts.getOptions().colors 属性来配置颜色。

//颜色的填充
Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function (color) {
   return {
      radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
      stops: [
         [0, color],
         [1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
      ]
   };
});

实例

单色饼图

colors 配置

使用 Highcharts.getOptions().plotOptions.pie.colors 属性来配置每个饼的颜色。

// 设置单色并为所有饼设置默认主题
Highcharts.getOptions().plotOptions.pie.colors = (function () {
   var colors = [];
   var base = Highcharts.getOptions().colors[0];
   var i;

   for (i = 0; i < 10; i += 1) {
      // 以一暗色开始并以亮色结束
      colors.push(Highcharts.Color(base).brighten((i - 3) / 7).get());
   }
   return colors;
}());

实例