Highcharts简单使用

最近需要做一个用图表来表示数据库中的某个设备的电量随时间推移的图表。没错，需求就是这么简单。共要做两个图表，第一个实时状态图表，要先加载最新的20个状态，然后定时取最新状态来更新图表。第二个相对简单，就是取固定时间范围的电量，在页面上以图表形式展示。

Google了一下，发现目前市面上免费的图表控件，Highcharts比较好用，有强大的团队支撑，以产品形式发布，图表的多样，功能的强大等好处。于是就下载下来使用。

首先，第一个异步加载数据更新图表。Highcharts官方有提供这样一个demo，关键问题就是怎么套用在自己的项目中了。

官方的例子是这个：

Dynamic charts

Spline updating each second    

呈现如下图： 打开源码后发现，它的x轴，用的是datetime类型。而我这里不能用datetime类型，因此查询了api后，只能使用categories类型，但是在使用了ajax加载数据后，发现后面加载进来的X轴数据，全是数字，如20，21这样。很郁闷。查了半天api都无果，最终用Highcharts源码，在chrome中调试发现，在新增point时，X轴的categories未增，因此，要在addpoint之前，将categories+1，这样，就解决了。关键代码如下：

chart.xAxis[0].categories.push(x);