折线图介绍

从单一一个折线图表开始.选用World Bank 组织（www.worldbank.org)提供的众多数据中的一个。下面的代码片段创建了一个简单的折线图，表现了日本过去三十年中65岁以上人口的百分比：

  1.  var chart = new Highcharts.Chart({
  2. chart: {    
  3.   renderTo: 'container'    
  4. },    
  5. title: {    
  6.   text: 'Population ages 65 and over (% of total)',    
  7. },    
  8. credits: {    
  9.   position: {    
  10.   align: 'left',    
  11.   x: 20    
  12. },    
  13. text: 'Data from The World Bank'    
  14. },    
  15. yAxis: {    
  16. title: {    
  17. text: 'Percentage %'    
  18. }    
  19. },    
  20. xAxis: {    
  21. categories: ['1980', '1981',    
  22. '1982', ... ],    
  23. labels: {    
  24. step: 5    
  25. }    
  26. },    
  27. series: [{    
  28. name: 'Japan - 65 and over',    
  29. data: [ 9, 9, 9, 10, 10, 10, 10 ... ]    
  30. }]    
  31. });    
  33. 如下图：

折线图介绍 - 图1

除了在 categories属性中手动定义年份，还可以使用 series中的 pointStart选项来初始化x轴的第一个点的值。因此我们在 xAxis中无任何配置但在seies中定义了 pointStart，代码如下：

  1. xAxis：{    
  2. },    
  3. series: [{
  4.     pointStart : 1980, 
  5.     name: 'Japan - 65 and over',    
  6.     data: [ 9, 9, 9, 10, 10, 10, 10 ... ]
  7. }]

虽然这是个简化的例子，x轴的标签会自动匹配数据通过 Highcharts的 numberFormat方法，这样使得在每个三位数字（大于1000的数字）后加上一个逗号，下面是x轴的具体输出：

折线图介绍 - 图2

为了解决这个问题，我们需要重写标签的 formatter选项，这很简单，只要返回一个标签值来绕开默认 numberFormat方法的调用就可以了。 此外，还需要将 allowDecimal选项置为false.因为，当调整图表大小时会延长x轴，小数就会显示出来。

下面是使用 pointStart来控制x轴年份值得最终版本：

  1. xAxis: {     
  2.  labels:{     
  3.  formatter: function() {     
  4.  // 'this' keyword is the label object     
  5.  return this.value;     
  6.  }     
  7.  },     
  8.  allowDecimals: false     
  9.  },     
  10.  series: [{     
  11.  pointStart: 1980,     
  12.  name: 'Japan - 65 and over',     
  13.  data: [ 9, 9, 9, 10, 10, 10, 10 ... ]     
  14.  }]

扩展到多个系列的折线图

下面我们新增加几个系列折线，并把日本的折线增加到6个像素宽，代码如下：

  1. series: [{
  2.     lineWidth: 6,
  3.     name: 'Japan',
  4.     data: [ 9, 9, 9, 10, 10, 10, 10 ... ]
  5.     }, {
  6.     Name: 'Singapore',
  7.     data: [ 5, 5, 5, 5, ... ]
  8.     }, {
  9.     ...
  10.     }]

日本系列的人口折线变成了图标中的焦点，如下截图：

折线图介绍 - 图3

向更加复杂的折线图前进！为了展示颠倒的折线图，使用 chart.inverted 选项将y轴和x轴置为相反的方向。 然后改变坐标轴的颜色匹配相同系列的颜色。同时，禁用了所有系列的数据点标记，最后添加 yAxis：1 属性用来 使第二个系列坐标轴与第二个y轴数组数据匹配，这样就得到了上下两个不同颜色，不同刻度的“y”（其实是颠倒后的y）坐标轴，如下：

  1. chart: {
  2.     renderTo: 'container',
  3.     inverted: true,
  4.     },
  5.     yAxis: [{
  6.         title: {
  7.             text: 'Percentage %'
  8.         },
  9.     lineWidth: 2,
  10.     lineColor: '#4572A7'
  11.     }, {
  12.     title: {
  13.         text: 'Age'
  14.     },
  15.     opposite: true,
  16.     lineWidth: 2,
  17.     lineColor: '#AA4643'
  18.     }],
  19.     plotOptions: {
  20.         series: {
  21.             marker: {
  22.                 enabled: false
  23.                 }
  24.             }
  25.         },
  26.     series: [{
  27.         name: 'Japan - 65 and over',
  28.         type: 'spline',
  29.         data: [ 9, 9, 9, ... ]
  30.         }, {
  31.         name: 'Japan - Life Expectancy',
  32.         yAxis: 1,
  33.         data: [ 76, 76, 77, ... ]
  34.         }]

下面是颠倒过后并有两个“y”轴的图标：

折线图介绍 - 图4

上图中数据的表示看起来可能有点奇怪，因为我们把通常的时间标签交换成到了y轴并且数据的走势不便于理解。其实 inverted option 一般是用来展示不连续的数据格式或用于柱状图中。我们从上图中获取的信息是这样的： 12%的日本人口在65岁及以上，1990年的平均寿命是79岁。

同过设置 plotOptions.series.marker.enabled 为 false 可以关闭所有数据点的标记，如果想为一个特定的系列展示数据点标记，可以关闭全局的标记并打开那个特定系列的标记属性，或者其他方式

  1. plotOptions: {
  2.     series: {
  3.         marker: {
  4.             enabled: false
  5.         }
  6.     }
  7. },
  8. series: [{
  9.     marker: {
  10.         enabled: true
  11.     },
  12.     name: 'Japan - 65 and over',
  13.     type: 'spline',
  14.     data: [ 9, 9, 9, ... ]
  15. }, {

下面的图表展示了只有65及以上年龄的系列有数据点标记：

折线图介绍 - 图5

本章结束咯~