实现highcharts放大缩小

原文地址：http://www.stepday.com/topic/?800

当我们将图表某个区域放大值某一个倍数后发现刻度间隔距离也放大了，由于刻度间隔还是原来初始所设定的值，从而让局部数据的X轴刻度不是很清楚，虽然我们可以将鼠标移动至数据点上进行查看，但是很费事。所以就希望做到放大后能够逐渐减小X轴刻度间隔，图表回到初始值后重新设置原始的坐标刻度间隔。这样一来就能够很友好地响应用户的浏览体验了。

于是产生了两个疑问：

1、图表放大时如何动态修改X轴的刻度间隔(tickInterval);

2、图表Reset zoom按钮点击后如何捕获这个动作从而让其刻度间隔(tickInterval)设置为初始值。

解决方案：

一、何时动态修改X周刻度间隔

我们通过监听chart的selection选择事件，只要用户选择了图表区域，图表将会放大，所以我们在这个事件内实现图表刻度的缩小：

01.
DynamicChangeTickInterval(1);
view sourceprint?
1.
//动态修改xAxis的刻度间隔值
2.
function DynamicChangeTickInterval(interval) {
3.
chart.xAxis[0].update({
4.
tickInterval: interval
5.
});
6.
}

二、如何监听图表Reset zoom按钮事件

图表放大后将会显示一个还原图表的按钮，当用户点击此按钮后图表将会redraw重画，但是刻度间隔不会还原至初始值，所以我们需要重写Highcharts图表的这个按钮事件，通过检查源码得知其按钮所调用的方法为：zoomOut

这样一来就已经达到我们的目标了，最后贴上示例的完整代码：

01.
02.
<</code>html>
03.
<</code>head>
04.
<</code>meta http-equiv="Content-Type" content="text/html; charset=utf-8">
05.
<</code>title>Highcharts Example</</code>title>
06.
<</code>script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></</code>script>
07.
<</code>script type="text/javascript">
08.
var chart = null;
09.
var OldInterval = 3;
10.
$(function () {
11.
//设置初始值
12.
Highcharts.setOptions({
13.
lang: {
14.
resetZoom: "返回",
15.
resetZoomTitle: "回到初始状态"
16.
}
17.
});
18.
 
19.
$('#container').highcharts({
20.
chart: {
21.
type: 'line',
22.
zoomType: 'x',
23.
events: {
24.
//监听图表区域选择事件
25.
selection: function () {
26.
//动态修改
27.
DynamicChangeTickInterval(1);
28.
}
29.
}
30.
},
31.
title: {
32.
text: "图表放大后动态设置X轴刻度间隔且还原后回到原始状态示例"
33.
},
34.
xAxis: {
35.
tickInterval: OldInterval //默认间隔值为3
36.
},
37.
credits: {
38.
text: "www.stepday.com",
39.
href: "http://www.stepday.com",
40.
style: {
41.
color:"red"
42.
}
43.
},
44.
series: [{
45.
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
46.
}]
47.
}, function (chartObj) {
48.
//获得图表对象
49.
chart = chartObj
50.
});
51.
//扩展或者重写Highcharts图表组件的方法
52.
ExtendHighcharts();
53.
});
54.
 
55.
//动态修改xAxis的刻度间隔值
56.
function DynamicChangeTickInterval(interval) {
57.
chart.xAxis[0].update({
58.
tickInterval: interval
59.
});
60.
}
61.
 
62.
//扩展或者重写Highcharts图表组件的方法
63.
function ExtendHighcharts() {
64.
Highcharts.extend(Highcharts.Chart.prototype, { zoomOut: function () {
65.
//还原图表X轴的间隔
66.
DynamicChangeTickInterval(OldInterval);
67.
//还原图表初始状态
68.
this.zoom();
69.
}
70.
});
71.
}
72.
</</code>script>
73.
</</code>head>
74.
<</code>body>
75.
<</code>script src="../js/highcharts.js"></</code>script>
76.
<</code>div id="container" style=" 500px; height: 400px; margin: 0 auto">
77.
</</code>div>
78.
</</code>body>
79.
</</code>html>

三、最终演示效果

效果查看地址请访问：http://jsfiddle.net/sTWSL/