绘制面积图

在这一部分，我们会将本章中第一个例子修改成一个更加有格调的面积样条图表。 结合使用 area 和 spline 属性将会生成area spline chart，主要的数据线被绘制成一个样条曲线，其下的区域被渐变且有透明效果的相似颜色填充。 如图：

绘制面积图 - 图1

现在开始实现它吧！ 首先，我们希望图表的观察者能够方便的看到当前趋势的数值，所有我们将y轴移动到最近年份（2010)的旁边,也就是说放到了图表的对面一侧：

  1. yAxis:{
  2.     oppsite:true
  3.     }

接下来，移除间隔线，并调整y轴轴线的宽度，获得一个较细的轴线：

  1. yAxis:{
  2.     gridLineWidth:0,
  3.     lineWidth:1
  4.     }

然后用百分比标识（%）定义y轴的标题，并使之与轴线顶部对齐：

  1. yAxis:{
  2.     title:{
  3.         text:'(%)',
  4.         rotation:0,
  5.         x:10,
  6.         y:5,
  7.         align:'high'
  8.         },
  9.     }

至于x轴，我们使用红色加粗轴线，并删除轴线上的时间刻度：

  1. xAxis:{
  2.     lineColor:'#CC2929',
  3.     lineWidth:4,
  4.     tickWidth:0,
  5.     offset:2
  6.     }

对于标题，将其移动到图表的右侧，增加标题与图表的空白，并设置一个不同的字体：

  1. title:{
  2.     text:'Population ages 65 and over (% of total)- Japan ',
  3.     margin:40,
  4.     align:'right',
  5.     style:{
  6.         fontFamily:'palatino'
  7.         }
  8.     }

在以上设置之后，我们开始修改全部系列的表现形式，首先将 chart.type 属性由 ‘line’ 改为 ‘areaspline’.要注意的是，在 series 对象中设置这个属性会覆盖plotOptions.series中定义的 plotOptions.areaspline属性.

由于现在图表中只有一个系列，所以没有必要显示样例表(legend box),使用 showInLegend 属性删除它吧！ 接下来使图表变漂亮些，使用渐变的颜色填充面积区域，并为样条线设置一个比较暗的颜色：

  1. series: [{
  2.     showInLegend: false,
  3.     lineColor: '#145252',
  4.     fillColor: {
  5.     linearGradient: {
  6.     x1: 0, y1: 0,
  7.     x2: 0, y2: 1
  8.     },
  9.     stops:[ [ 0.0, '#248F8F' ] ,
  10.             [ 0.7, '#70DBDB' ],
  11.             [ 1.0, '#EBFAFA' ] ]
  12.     },
  13. data: [ ... ]
  14. }]

之后，我们沿着曲线引入一对数据标签，以表明老年人口的排名随着过去的时间而增长.使用系列数据数组中对应1995和2010年的数据，并转换数字值为数据点对象。由于我们只想呈现这两年的数据点，所有在全局上关闭了 plotOptions.series.marker.enabled 属性并在数据点对象中的样式设置中个别的开启标识点：

  1. plotOptions: {
  2.     series: {
  3.     marker: {
  4.     enabled: false
  5.     }
  6.     }
  7. },
  8. series: [{ ...,
  9.     data:[ 9, 9, 9, ...,
  10.         { marker: {
  11.             radius: 2,
  12.             lineColor: '#CC2929',
  13.             lineWidth: 2,
  14.             fillColor: '#CC2929',
  15.             enabled: true
  16.             },
  17.         y: 14
  18.     }, 15, 15, 16, ... ]
  19. }]

接下来，我们为数据标签绘制一个外边框，外边框为一个圆角(borderRadius)红色(borderColor)矩形。 使用x或y 选项可以很好的调整数据标签的位置。最后，我们更改数据标签的默认格式方法，使之返回人口在国家中的排名而不是数据点的值：

  1. series: [{ ...,
  2.     data:[ 9, 9, 9, ...,
  3.         { marker: {
  4.             ...
  5.         },
  6.         dataLabels: {
  7.             enabled: true,
  8.             borderRadius: 3,
  9.             borderColor: '#CC2929',
  10.             borderWidth: 1,
  11.             y: -23,
  12.             formatter: function() {
  13.                 return "Rank: 15th";
  14.             }
  15.         },
  16.         y: 14
  17.     }, 15, 15, 16, ... ]
  18. }]

最后一项操作时为图表应用一个灰色背景并增加底部空白(spacingBottom),spacingbottom额外的空白是为了避免credit lable(Highcharts.com) 与x轴lable太过靠近，因为我们禁用了图例表(legend box)。

  1. chart:{
  2.     renderTo:'container',
  3.     spacingBottom:30,
  4.     backgroundColor:'#EAEAEA'
  5.     }

当所有的配置都设置好后，就会显示出本节开头的截图了~！