highcharts使用

之前用Rapheal画图表,自己写,一个两个还好,这次要画六个图表就有点够呛了,发现highchart挺不错的。

这里是几个web图表比较:

http://socialcompare.com/en/comparison/javascript-graphs-and-charts-libraries

highchart还是蛮多人支持的,只不过商业用途需要收费:

http://shop.highsoft.com/highcharts.html

在线文档:

http://api.highcharts.com/highcharts

 

这个在线demo可以直接jsfiddle编辑

http://www.highcharts.com/demo/

 

 

 

数据的格式:

http://api.highcharts.com/highcharts#series.data

每个点附加自定义数据

如果你想传自定义数据,则应传对象,但要有y,(如果x轴不是category,则要传x)

这样如果每个point格式为{x:1,y:2,mydata:’abc’},则在tooltip的formatter回调中可这样this.point.mydata获得mydata(shared为false时,一般建议shared为false,除非每个tip里要获得所有此x坐标上y点,这时就是this.point[i].mydata。)

x,y轴都可以是datetime类型,但是传入的值应该是Date.getTime()的值。

tickInterval是定义间隔的,但是如果是负数则会显示不正常。

 

 

gauge chart

需要highharts-more.js,point.push方法如果传入的是{}则会改变指针颜色,可能是个bug,传数值就不会变。

相关示例:

http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/gauge-dial/

http://jsfiddle.net/CVJLV/

但是这两个都不能解决update传入object问题,最后只好设置全局样式:

Highcharts.setOptions({

colors : ['#000', '#0d233a', '#8bbc21', '#910000',

'#1aadce', '#492970', '#f28f43', '#77a1e5',

'#c42525', '#a6c96a']

});

因为从源码里看只有colors 这个设置里第一个color是指针的颜色,改为#000(黑色即可)。

这样你就可以向push方法里传object而指针颜色不变了。

 

 

添加自定义button例子:

http://jsfiddle.net/highcharts/2F4pJ/

http://stackoverflow.com/questions/9218490/highcharts-add-a-custom-image-button

button配置:

http://api.highcharts.com/highcharts#exporting.buttons.contextButton.symbol

button的提示是_titleKey这个配置,但是它的值是lang里面的key,所以需要:

Highcharts.setOptions({ 

lang : { 

'Zoom Out' : 'Zoom Out' 

} 

}); 

然后把Zoom Out这个设置为button的是_titleKey

 

 

从缩小到放大

放大官方不支持,可通过方法

http://api.highcharts.com/highcharts#Axis.setExtremes()

来实现。基本思路是每次selection事件中存储上次的min,max值,每次实现放大时就设置axis的setExtremes为存储的值。

例如:

chartops.chart.events = {
			selection : function(event) {
				if (event.resetSelection) {
					zoomInStack = [];
					lastZoomData = false;
				} else {
					if (lastZoomData) {
						zoomInStack.push(lastZoomData);
					}
					lastZoomData = [[event.xAxis[0].min, event.xAxis[0].max],
							[event.yAxis[0].min, event.yAxis[0].max]];
				}
			}
		};
		chartops.exporting = {
			buttons : {
				customButton : {
					_titleKey : 'Zoom Out',
					onclick : function() {
						var hc = $(chartEl).highcharts();
						if (!zoomInStack.length) {
							hc.zoomOut();
//							log('no length');
							return;
						}
						var mm = zoomInStack.pop();
						lastZoomData = false;
						if (!mm) {
//							log('no stack');
							hc.zoomOut();
							return;
						}

						hc.xAxis[0].setExtremes(mm[0][0], mm[0][1], false);
						hc.yAxis[0].setExtremes(mm[1][0], mm[1][1]);
//						log('zoomout', mm);
					},
					text : '[-]'
				}
			}
		};

chart.zoomOut这个方法是相当于resetZoom,回到原始比例,这个方法没有公开。

隐藏resetZoom按钮:

 

chartops.chart.resetZoomButton = {
			theme : {
				display : 'none'
			}
		};

 

 

其实搞这么麻烦,也可以考虑http://www.fusioncharts.com/demos/gallery/#zoom-line

但是fushioncharts默认的样式觉得没有highcharts好看。


Total views.

© 2013 - 2018. All rights reserved.

Powered by Hydejack v6.6.1