實現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="width: 500px; height: 400px; margin: 0 auto">
77.
</</code>div>
78.
</</code>body>
79.
</</code>html>

三、最終演示效果

效果查看地址請訪問：http://jsfiddle.net/sTWSL/