绘制单饼图 —— 单个数据序列

本节中，我们将使用vgchartz (www.vgchartz.com)上的游戏数据。后面的饼图配置和数据是2011年发行的游戏的销售量最多的100个游戏的销售量。Wii体育游戏从数据中去除了，因为在Wii中是可以免费获得的。

  1.       chart: {
  2.         renderTo: 'container',
  3.         type: 'pie',
  4.         borderWidth: 1
  5.       },
  6.       title: {
  7.         text: 'Number of Software Games Sold in 2011 Grouped by Publishers',
  8.       },
  9.       credits: { 
  10.         ...
  11.       },
  12.       series: [{
  13.         data: [ [ 'Nintendo', 54030288 ], 
  14.             [ 'Electronic Arts', 31367739 ],
  15.             ... ]
  16.       }]

这是一个简单的饼图的示例，第一个数据点（任天堂，Nintendo）起始于12点钟的方向。第一个数据点永远从这里开始，无法改变。

image

配置饼图切片

We can improve the previous pie chart to include values in the labels and word wrap some of the long names of the publisher. Instead of redefining the dataLabels.formatter option, we will predefine a method, formatWithLineBreaks and use it inside the formatter option because we will reuse this method in other examples: 我们可以优化前面的饼图，加入数据标签，发行商名字也可以折行显示。在格式化选项中，我们将预定义一个方法formatWithLineBreaks，取代dataLabels.formatter选项：

  1.     function formatWithLineBreaks(str) {
  2.       var words = str.split(' ');
  3.       var lines = [];
  4.       var line = '';
  6.       $.each(words, function(idx, word) {
  7.         if (line.length + word.length > 25) {
  8.           lines.push(line);
  9.           line = '';
  10.         }
  11.         line += word + ' ';
  12.       });
  13.       lines.push(line);
  14.       return lines.join('<br/>');
  16.     }

下面是饼图的绘制选项代码。allowPointSelect 允许用户可以点击饼图进行交互。对于这个饼图，我们将从饼中切出一个扇形区域（见下图）。sliceOffset选项就是用来设置这个分割的扇区与饼图之间的距离。

  1.    plotOptions: {
  2.      pie: {
  3.        slicedOffset: 20,
  4.        allowPointSelect: true,
  5.        dataLabels: {
  6.          formatter: function() {
  7.            var str = this.point.name + ': ' +          
  8.              Highcharts.numberFormat(this.y, 0);
  9.            return formatWithLineBreaks(str);
  10.          }
  11.        }
  12.      }
  13.    },

此外，我们想分离最大的一个扇区，它的数据标签使用粗体显示。为此，我们需要修改最大一个扇区的数据点，想下面这样让这个数据点变成一个对象。然后我们将sliced属性写在这个数据对象中，使用false覆盖默认true值，这将强制分离这个数据扇区。然后，将fontWeight属性也覆写为bold，让数据标签变为粗体字：

  1.     series: [{
  2.       data: [ { 
  3.         name: 'Nintendo', 
  4.         y: 54030288, 
  5.         sliced: true, 
  6.         dataLabels: { 
  7.           style: { 
  8.           fontWeight: 'bold' 
  9.           } 
  10.         } 
  11.        }, [ 'Electronic Arts', 31367739 ], 
  12.         [ 'Activision', 30230170 ], .... ]
  13.     }]

下图是重新定义过数据标签的图表：

image

扇区之间的默认距离是10像素，slicedOffset选项已经将分离的扇区移开了更远的一段距离。如果slcedOffset应用于所有的数据分区，将意味着我们我不能控制单独的扇区分离距离。值得注意的一点是，连接扇区和数据标签的断线可能会错位。下一个例子中，我们将sliced属性应用于更多的数据点，删除slicedOffset属性，以恢复为默认数值，来展示这些差别。将上面这个对象（任天堂，Nintendo）的属性复制到其它两个数据中：

image

注意连接线恢复成了平滑线。但是，另外一个有趣的现象：默认情况下，sliced默认是false，当用户点击其中一个分片的时候，这个分片就会从饼图中被分离出来，其它被分离出来的扇区将回到他们原来的位置；而三个将sliced设置为true的扇区，在点击其它扇区之后，依然保持分离的距离并不会回到中心位置。这意味sliced选项设置为true之后，实际上是将其与其它默认为false的扇区独立开来了。

为饼图设置图例

到目前为止，我们的饼图包含一堆巨大的数字；这很难让人只管比较他们之间的差异。我们可以使用百分比的形式展示数据标签。我们将发行商名称放在一个图例栏里面，然后在饼图的扇区中标注它们的百分比。

绘制选项重新定义如下。开启图例栏，设置showInLegend为true。然后设置标签姿态颜色和样式，修改formatter函数，展示百分比。percentage变量智能应用在饼图中。distance选项是设置数据标签和饼图外边缘之间的距离。正数距离，标签在饼图外侧；负数距离，标签将出现在饼图内部。

  1.       plotOptions: {
  2.         pie: {
  3.           showInLegend: true,
  4.           dataLabels: {
  5.             distance: -24,
  6.             color: 'white',
  7.             style: {
  8.               fontWeight: 'bold'
  9.             },
  10.             formatter: function() {
  11.               return Highcharts.numberFormat(this.percentage) + '%';
  12.             }          
  13.           }
  14.         }
  15.       },

对于图例栏，我们在图例之间加一些填充，再将整个图例栏向饼图靠近：

  1.       legend: {
  2.         align: 'right',
  3.         layout: 'vertical',
  4.         verticalAlign: 'middle',
  5.         itemMarginBottom: 4,
  6.         itemMarginTop: 4,
  7.         x: -40
  8.       },

绘制完的饼图如下：

image