准备绘制圆环图

Highcharts提供了另外一种饼图——圆环图。它可以绘制子类别的数据，更好的展现数据的细节。而且子数据序列可以绘制多级。在这一节里，我们将创建一个简单的圆环图，圆环的外圈数据（游戏名称）和内圈数据（发行商）对齐。

简单起见，我们仅绘制前三个游戏发行商的数据在内圈。下面是绘制圆环图的序列配置：

      series: [{
        name: 'Publishers',
        dataLabels : {
          distance: -70,
          color: 'white',
          formatter: function() {
             return this.point.name + ':<br/> ' + Highcharts.numberFormat(this.y / 1000000, 2);
          },
          style: {
             fontWeight: 'bold'
          }
        },
        data: [ [ 'Nintendo', 54030288 ], [ 'Electronic Arts', 31367739 ],
            [ 'Activision', 30230170 ] ]
      }, {
        name: 'Titles',
        innerSize: '60%',
        dataLabels: {
          formatter: function() {
            var str = '<b>' + this.point.name  '</b>: ' + High-charts.numberFormat(this.y / 1000000, 2);
            return formatWithLineBreaks(str);
          }
        },
        data: [ // Nintendo
            { name: 'Pokemon B&W', y: 8541422,
             color: colorBrightness("#4572A7",
                        0.05) }, 
            { name: 'Mario Kart', y: 5349103,
             color: colorBrightness('#4572A7',
                        0.1) },
            ....

            // EA
            { name: 'Battlefield 3', y: 11178806,
             color: colorBrightness('#AA4643',
                        0.05) }, 
            .... 

            // Activision
            { name: 'COD: Modern Warfare 3', 
             y: 23981182, 
             color: colorBrightness('#89A54E',
                        0.1) },
            ....
        }]
      }]

首先，我们有两层数据序列，内层饼图表示发行商，外层圆环表示游戏。游戏名称数据是发行商数据的子分类，同一个发行商的游戏总和应该和内层发行商数据保持对齐。因此子分类的顺序，应该是所有任天堂（Nintendo）的游戏数据位于所有EA发行的游戏的前面，依此类推（参见Title序列的数据数组）。

每一个子序列的数据点，可以赋予一个和他的父序列相近的颜色。可以通过下面的示例这样改变颜色的亮度：

color: Highcharts.Color(color).brighten(brightness).get()

基本上，使用主要类别颜色值来创建一个Color对象，然后调整亮度参数。此参数可以来自子类别数值的比率。我们改写本示例为一个函数 colorBrightness，并在图表配置中调用它。

 function colorBrightness(color, brightness) {
   return   
     Highcharts.Color(color).brighten(brightness).get();
 }

接下来，指定那些数据是内部饼图，哪些是外部圆环。外部数据序列Title，将使用innerSize选项，创建一个空心的内圆。这样，Title序列就会展示成一个圆环。innerSize选项可以是像素数值，也可以是绘图区域的百分比。

最后，来放置数据标签。显然我们需要将内部数据标签放到内部饼图上，所以我们给dataLabels.distance选项一个负数距离。为了避免太长的数据值，我们使用formatter方法，把数据单位转换为millions（百万）。 下面就是画好的圆环图：

image

注意，这并不意味着只能在圆环图的中间画一个饼图。只是我们的例子是这样的。我们可以绘制多个同心圆。下面就是使用前面的数据，只是在内部发行商饼图上也加入了innerSize选项：

image

我们可以进一步为圆环图加入第三个数据序列。我们绘制一个三层的圆环图。代码是简单的扩展了上面的示例，加入了更多的数据。源代码和演示可以从这里 http://joekuan.org/Learning_Highcharts/ 获取。外面两个圆环图设置了innerSize，内部饼图因为变得更小，而没有足够的空间展示数据标签，所以我们使用showInLegend选项，把最内层的数据标签移到饼图外面的图例栏当中。

image