使用 amcharts 和 highcharts 绘制多曲线图的通用方法

工作中用到， 这里分享一下。 可以使用 amcharts 和 highcharts 在同一坐标中绘制多个对比曲线图。 当然， 对图形没有过多装饰， 可以参考 API 文档：

highcharts: Highcharts API

amcharts: amcharts API

0. 说明

amcharts 与 highcharts 对于数据格式的要求是不一样的。 amcharts 只需要一个 对象数组 [{'x': 1, 'y': 2, 'z': 3}, {'x':2, 'y': 4, 'z': 6}]， 并指明 x ,y 轴的字段名，其它的就交给 amcharts 了； 而 highcharts 则需要对每个曲线图定义好二维数组 , [[1,2], [2,4]] , [[1,3], [2,6]] ; 如果要使用对象数组返回格式， 就需要进行数据抽取和重组， 以符合 highchart 的要求。

由于 javascript 所使用的标准数据格式是 JSON， 因此， 可以非常方便地进行数据拼接和组合。 也就是说， 如果要在同一坐标中绘制多个曲线图， 只需要定义一个数组， 将多个曲线图的数据加入数组即可。

实现中， 有三点需要重点说明：

a. 时间字段。 由于不同的API 返回的JSON数据中，时间的字段名不一定相同（比如有的为 time, 有的为 timestamp）， 并且时间的格式有所不同（比如有的为字符串， 有的为时间戳）， 为了追求灵活性， 需要使用一个日期转换函数 convertDate(chartData, timeStampFieldName, dateConvertFunc) 来统一处理。 这里统一转换为 javascript timestamp 再转化为 Date 类型， 可以兼容 Firefox 和 Chrome .

b. 返回数据的格式， 主要以对象数组为主；

c. 由于要绘制任意多个曲线图， 这里也需要考虑到灵活性， 利用了 JSON 格式的灵活性， 采用循环方式加入多个曲线的配置项来实现。

1. 返回数据格式

        
        4.  使用 highcharts 绘制:
        需要导入: