highcharts使用
in Web前端 on highcharts, javascript - Hits()
之前用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,传数值就不会变。
相关示例:
但是这两个都不能解决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好看。
