使用highcharts来建立多轴时间序列图

实现效果如图的timeseries chart，一些概念在图上做了标注。

有几个特点：

1.多个Y轴，两个、三个数量不限，均匀地垂直排列，每个轴只有一条数据线

2.共享X轴，X轴是时间轴，同时crosshair可以在多个轴上同步移动

3.支持plot band，就是半透明的带状图形，可以从第三个维度表示一段时间的某种状态，在开始结束的地方有flag。

highcharts的配置是一个JS对象，属性非常多，但是层级概念很清晰，文档比较容易阅读查找，相信任何人用一段时间就可以很快上手。

大体上讲，配置包括整个chart的，比如height、width、margin等，然后是坐标轴的，比如title、range，进一步是具体图形的配置。图形series的配置有3级：plotOptions.series配置所有series的通用属性；每个类型的series在具体类型的配置属性中，比如plotOptions.area；具体某一个series的配置可以放到series数组中。具体的配置能够覆盖掉通用的配置。

其实上面的前两个特性在hightcharts的一个叫synchronized-charts的demo中已经有支持，但是方案跟本文完全不同，各有千秋，本文的要简单些。

废话少说，上代码： 

{    xAxis: {        type: 'datetime',        crosshair: {            dashStyle: 'shortdot'        }    },    plotOptions: {        areaspline: {     // 带填充的样条曲线            ...        },        area: {   // 只用于替代highcharts内置的plot bands，因为不清楚如何配置多个Y轴独立的band            marker: {                enabled: false               // 不需要marker            },            lineWidth: 0,                   // 只有填充，没有line            fillColor: 'rgba(160, 200, 220, 0.5)',            enableMouseTracking: false     // 因为area只用于plot band，所以不响应鼠标事件        },        flags: {            shape: 'circlepin',            tooltip: {                followPointer: true,     //flag的tooltip跟随鼠标，不设置的话在多个轴的情况下会都跑到最上面            }        }    },    tooltip: {        useHTML: true,       // 所有tooltip都使用html格式    }}

上面的配置是一些静态的通用配置，去掉了一些跟主题关系不大的，比如areaspline的具体配置，主要看plot band（area）和flag的配置，他们定义了plot band和flag的样式和行为。这些静态配置在图像的第一次初始化和以后动态更新数据时都不需要改变。

相对的，动态的配置就是根据传入的参数动态变化的，主要是yAxis和series的配置，以及整个图像的高度。

由于highcharts的配置比较复杂，为了尽可能简化调用者的使用难度，在动态添加轴时对配置进行了一些抽象。比如图像的高度会随着轴数的增加而变化，调用者只需要配置每个轴的高度就可以，整个chart的高度会自动调整，后面如果需要动态调整图像高度也比较方便。

这样，想要画出最开始的那个图像，不包括plot band和flag，用户只需要输入如下的数据： 

{    axisHeight: 200,    yAxis: [        {            id: "1",            name: "Link A"        },        {            id: "2",            name: "Link B"        }    ],    data: {        "1": [            [1482463578000, 113],            [1482463878000, 22],           ...        ],        "2": [            [1482463578000, 34],            [1482463878000, 245],           ...        ]    }}

只有单纯Y轴和数据，那么代码需要隐含增加哪些配置呢？其实主要是坐标轴的偏移配置。默认的，如果没有偏移配置，所有Y轴是叠加在一起的。

这里使用了yAxis.top属性，官方文档的解释是：The top position of the Y axis. If it's a number, it is interpreted as pixel position relative to the chart. 也就是在动态添加Y轴时，属性top的值要这样：

  top: (axisHeight + 30) * i + 20

axisHeight是用户输入的配置，i是循环变量，多个轴时从0开始，30是两个图形之间的宽度，单位都是pixel。

series的配置没有特殊之处，需要指定线型和绑定的Y轴。

好了，后面就是如何添加plot band和flag了。二者都是基于已有Y轴的，所以不需要再修改Y轴配置，只需要添加series就可以。

除了上面代码注释中提到的，系统自带plot band无法多个轴独立配置之外，如果使用系统自带plot band，flag也很难挪到图像上方，默认只有两种配置:附于X轴或者series线条。而使用series来模拟plot band，这个问题就不存在了，因为这个area的series是等高的，大小等于areaspline的extreme的dataMax再乘以一个系数，依附于这个series的flag已经在图像最上方了。

area series的配置如下： 

{    type: 'area',    id: 'xxx'    yAxis: 'xxx',    zIndex: -1，    data: [[from, dataMax], [to, dataMax]]}

注意也需要绑定Y轴。

flag series的配置如下： 

{    type: 'flags',    title: 's',    onSeries: 'xxx'    yAxis: axis_id,    tooltip: {...},    data: [{              x: start,          },{              x: stop,          }]}

要绑定area的series和Y轴。

暂未实现的特性：

1.flag的样式只能使用highcharts自带的，这里是’circlepin’

2.marker上的toolltip只显示当前轴的数据，不能在一个tooltip中同时显示同一时间点多个轴的数据。 尽管tooltip有share属性，但是只对同一个坐标轴的多个series有效。