highcharts和highstock实时刷新折线图小总结

这几天做了一个小项目。主要是用了highcharts插件，但是主要研究了里面的折线图中的实时刷新的图。
先放一张highcharts效果图。

如图所示，x轴上的时间是获取当前的时间，并且一直在刷新。下面我主要写一下我在使用的过程中遇到的问题以及解决方法。
1、highcharts文件可以在官网下载。在引入highcharts之前一点要先引入jQuery文件，不然会报错。
2、官网上的线条颜色是默认蓝色、黑色、绿色、橙色…..。如果想要其他颜色的线条，有两种方法。
一是在series里面加上color属性，

二是在全局设置里添加colors属性，后面跟数组。这样就会默认按照顺序在数组里取颜色。

3、实时刷新的图一般都是从后台获取数据再加载到页面上。我们现在取的数据是模拟数据，即y轴上的数据是随机数。获取数据用到ajax

4、官网是提供的实例在右下角都有一个名片，如图所示

想去掉名片的话只需要加一句话。

credits: {
   enabled: false
 }

但是由于highcharts上的x轴一般只有20秒的时间，而且时间跨度不方便调节，所以后期改用了highstock插件。但是因为页面上还有使用highcharts画的饼状图。所以一开始打算两个文件都使用，但是当两个文件都引入的时候就会报错，查了原因发现highcharts和highstock不能同时引用，但是highstock包含highcharts里面的内容，所以如果想要同时使用两个文件，只需要把highcharts文件删掉，只引入highstock就可以。（我就是这样引入的，但目前为止还没有出现问题）。

highstock

1、highstock默认y轴是在右边，但是我们需要让y轴在左边，所以在y轴的设置里加上一句话

yAxis: {
    opposite: false
 },

2、左上角的时间按钮有“zoom”字样，如图所示。

如果想改成其他的内容可以在全局设置里加入以下代码

lang: {
     rangeSelectorZoom: '这里为你要改变的内容' 
 },

3、highstock默认是一条光秃秃的曲线，即不是highcharts那样，折线上都有不同形状的点标记。所以需要自己手动设置。两种方法
（1）加入plotOptions属性

plotOptions: {
   series: {
       marker: {
        enabled: true,
           radius: 3,  //曲线点半径，默认是4
           symbol: "circle" //曲线点类型："circle", "square", "diamond", "triangle","triangle-down"，默认是"circle"
       }
   }
},

当然如果有多条折线，也可以写成像全局颜色那样的数组，折线会按照顺序在数组中取数据。即把

symbol: "circle"
改成
symbols : ["circle",'triangle',"square","diamond"]

（2）在相应的series中加入marker属性

series :[{
    name: 'test1',
    marker:{
      enabled:true,
      radius:3,
      symbol:"square"
    },
    data:data
}，{
    name: 'test2',
    marker:{
      enabled:true,
      radius:3,
      symbol:"circle"
    },
    data:data
}]

4、在默认的highstock中是不显示图例的，所以需要加上

legend: {
   enabled: true
},

这些都是我在完成项目的过程中自己总结的小经验，不敢保证全部正确，有问题欢迎讨论。
其他还有很多关于这个插件的知识，官网有很多实例，看看官网也能解决很多你需要的问题。