这几天做了一个小项目。主要是用了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
},
这些都是我在完成项目的过程中自己总结的小经验,不敢保证全部正确,有问题欢迎讨论。
其他还有很多关于这个插件的知识,官网有很多实例,看看官网也能解决很多你需要的问题。