# 圖表縮放（Zoom） 圖表縮放指的是局部放大或縮小圖表，可以更方便的查看圖表數據。 Highcharts支持兩種方式縮放，縮放（zoom）和平移（panning），**?并且是完美支持移動端手勢操作的** 。 ### 一、縮放（zoom） 只需要簡單設置 [zoomType](http://www.hcharts.cn/api/index.php#chart.zoomType) 即可實現圖表縮放，例如： ``` $("#container").highcharts({ chart: { zoomType: 'x' } // ... 省略代碼 }); ``` 其中 zoomType 取值為 `x`、`y`、`xy` 中的一個，分別表示圖表可以沿 x 軸，y軸，xy軸放大，也就是水平、豎直、平面放大。zoomType 默認值是 None，即無方法功能。 [在線試一試](http://code.hcharts.cn/highcharts/hhhh0k) #### 1、重置縮放比例按鈕 和重置縮放比例按鈕先關的配置有三個： * resetZoomButton：按鈕相關配置，詳見[API文檔](http://www.hcharts.cn/api/index.php#chart.resetZoomButton) * lang.resetZoom：按鈕文字 * lang.resetZoomTitle：按鈕標題 [在線試一試](http://code.hcharts.cn/hcharts.cn/hhhGmr) #### 2、選中樣式 [selectionMarkerFill](http://www.hcharts.cn/api/index.php#chart.selectionMarkerFill) 為選中時區域的背景填充，指為顏色（支持顏色代碼、十六進制、rgb、rgba形式）. [在線試一試](http://code.hcharts.cn/hcharts.cn/hhhGmr) #### 3、事件 圖表縮放事件處理函數，[chart.events.selection](http://www.hcharts.cn/api/index.php#chart.events.selection)，在事件處理函數里，可以獲取縮放相關信息，例如縮放后圖表的范圍，示例代碼 ``` $("#container").highcharts({ chart: { events: { selection: function(e) { // 事件處理代碼，可以通過 console.log(e) 查看更多詳細信息 } } } }); ``` 縮放事件的一些應用，例如需要在新的圖表里展現當前選中的范圍曲線，而不是放大操作，這時候就需要用到這個事件函數了，相關說明見[中文社區帖子](http://highcharts.me/question/98)。 [在線試一試](http://code.hcharts.cn/hcharts.cn/hhhG8o) ### 二、平移（panning） 圖表縮放后，我們還可以進行平移操作（Highstock 默認就是平移操作）。默認情況下，highcharts 是沒有開啟平移功能的，這個下面幾個參數相關 * [panning](http://www.hcharts.cn/api/index.php#chart.panning)：是否開啟平移功能，highcharts 默認是 false，highstock 默認為 true * [panKey](http://www.hcharts.cn/api/index.php#chart.panKey)：平移按鍵，對應的是鍵盤的鍵名，例如 ’Shift’， ‘ctrl’ 。對于 highcharts，開啟平移后，還需要設置 pankey，對應的操作是縮放圖表后，按鈕指定按鍵就可以平移了；對于 Highstock 則沒有這個配置，默認平移是直接拖動操作的。 * [pinchType](http://www.hcharts.cn/api/index.php#chart.pinchType)：同 zoomType，用于移動端手勢操作縮放方向。 [在線試一試](http://code.hcharts.cn/highcharts/hhhhyW)、[在線試一試2](http://code.hcharts.cn/highcharts/hhhhya) * * * （正文完，最后更新時間：2015-10-26 09:29:35）