[总结时间Summary Time] Highcharts的一些常见操作

阅读更多

HIghcharts是很强大的图表绘制插件,它是基于纯js绘制的。当然地,对于图表也会有很多操作了。下面就我工作时遇到的一些比较常见的highcharts的操作进行小结,不是很完整。

 

1)绘制Highcharts图形:

语法其实很「jquery」,只需$("#divId").highcharts(options);其中options为一个{ }结构,包含各种选项,这些选项是典型的json语法。这样就把一个highcharts图形填充到指定的div中了(div的id为divId);

 

2)获取Highcharts各种对象:

获取chart本身, 语法同样「jquery」$("#divId").highcharts()

获取highcharts的series ,很简单,先获取chart, 再chart.series即可(同理其他选项也是如此——其实就是获取json某个value的语法嘛);

注意highcharts的series是一个数组[], 你想具体到某个serie,需要加下标如chart.series[0]。

 

3)删除某个series: series[n].remove(false); //false表示不重绘chart;

 

4)为某个series加点,这常常用在走势图的动态刷新当中——addPoint:

比如,series[0].addPoint( [x,y]|y, boolean redraw, boolean shift)语法中,第三个boolean值Boolean shift如果为true,则表明添加一个点后,同时第一个点会被remove掉,视觉上就是图形动态往前移;若为false, 则是第一个点仍然在那,视觉上就是图形被挤压“皱”起来。而第二个参数Boolean redraw重绘当然设置为true了~~~~

 

5)设置x轴的category:

很常见,常用于条形图,雷达图,饼图等图形当中。这些图的category如果是动态从后台读取的话,需用此语法设置。

首先你必须找到xAxis,注意xAxis也是数组。所以要这样先获取:var xAixs = chart.xAxis[0]然后xAixs .setCategories(transTimeCategory, false);//false表示不重绘chart,第一个参数往往是后台传过来的字符串集合;

 

6)Js函数返回series,常常用于动态刷新上的点,如:

 

var series = [{
			name:'总量', 
			data: transCountList, 
			marker: {
				enabled: false
			}
		}];
	return series;

 其中,data数据来源为transCountList,而往往是一个后台返回的List>集合。Map的key为x或y, Object则为时间毫秒数,y为数值型数据。

 

 

7)chart.addSeries——常常用于条形图饼图雷达图等y轴上的数据刷新。

如:

 

avgTimeChart.addSeries({ 
	color:'green',
	data: transTimeData
}, false);

其中 transTimeData往往是数值型数据的集合如List List List等~~

 

 

8)chart.redraw()  这句话在setCategories和addSeries操作之后调用很有必要,之所以前面的操作第二个参数都是false,是想在操作都完事之后再统一调用redraw,  这常常用于图形的定时刷新中。

 

9)highcharts默认支持最多显示的series的点的个数为999个,如果想显示更多,请在series:{turboThreshold: number}里用number指定你想要显示最多的个数。

 

10)series.remove

var series = chart.series; 
while(series.length > 0) {  
	series[0].remove(false);//remove这个series之后是否重绘charts  
} 

 常常用于需结合后台动态给这个chart的series赋值时,需首先把画一个“空架子”的series:[]先删掉,再自己addSeries。。

 

btw,不能在ajax的success里面return,若想要得到ajax的后台返回值并把它作为js函数的返回值,只能另外定义一个变量去接收返回值,然后再return这个变量。原因是success是ajax的一个回调部分,他的返回值只是一个局部变量,你无法return这个回调里面的返回值。

 

=============== 不是十分完整,待补充 ==============

 

 

你可能感兴趣的:(highcharts,常见操作,小结,经验之谈)