實現highcharts放大縮小

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

當咱們將圖表某個區域放大值某一個倍數後發現刻度間隔距離也放大了，因爲刻度間隔仍是原來初始所設定的值，從而讓局部數據的X軸刻度不是很清楚，雖然咱們能夠將鼠標移動至數據點上進行查看，可是很費事。因此就但願作到放大後可以逐漸減少X軸刻度間隔，圖表回到初始值後從新設置原始的座標刻度間隔。這樣一來就可以很友好地響應用戶的瀏覽體驗了。

因而產生了兩個疑問：

一、圖表放大時如何動態修改X軸的刻度間隔(tickInterval);

二、圖表Reset zoom按鈕點擊後如何捕獲這個動做從而讓其刻度間隔(tickInterval)設置爲初始值。

解決方案：

1、什麼時候動態修改X周刻度間隔

咱們經過監聽chart的selection選擇事件，只要用戶選擇了圖表區域，圖表將會放大，因此咱們在這個事件內實現圖表刻度的縮小：

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

2、如何監聽圖表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>

3、最終演示效果

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