[总结时间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<String, Object>>集合。Map<String, Object>的key为x或y, Object则为时间毫秒数，y为数值型数据。

 

 

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

如：

 

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

其中 transTimeData往往是数值型数据的集合如List<Double> List<Integer> List<Long>等~~

 

 

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这个回调里面的返回值。

 

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