十五、基礎教程-圖表縮放（Zoom）

圖表縮放指的是局部放大或縮小圖表，可以更方便的查看圖表數據。
Highcharts支持兩種方式縮放，縮放（zoom）和平移（panning）， 並且是完美支持移動端手勢操作的 。

一、縮放（zoom）

只需要簡單設置 zoomType 即可實現圖表縮放，例如：

$("#container").highcharts({
  chart: {
    zoomType: 'x'
  }
  // ... 省略代碼
});

其中 zoomType 取值爲 x、y、xy 中的一個，分別表示圖表可以沿 x 軸，y軸，xy軸放大，也就是水平、豎直、平面放大。zoomType 默認值是 None，即無方法功能。

1、重置縮放比例按鈕

和重置縮放比例按鈕先關的配置有三個：

resetZoomButton：按鈕相關配置，詳見 API文檔
lang.resetZoom：按鈕文字，詳見API文檔
lang.resetZoomTitle：按鈕標題,詳見API文檔

2、選中樣式

selectionMarkerFill 爲選中時區域的背景填充，值爲顏色（支持顏色代碼、十六進制、rgb、rgba形式）.

3、事件

圖表縮放事件處理函數，chart.events.selection，在事件處理函數裏，可以獲取縮放相關信息，例如縮放後圖表的範圍，示例代碼

$("#container").highcharts({
  chart: {
    events: {
      selection: function(e) {
        // 事件處理代碼，可以通過 console.log(e) 查看更多詳細信息
      }
    }
  }
});

二、平移（panning）

圖表縮放後，我們還可以進行平移操作（Highstock 默認就是平移操作）。默認情況下，highcharts 是沒有開啓平移功能的，這個下面幾個參數相關·

panning：是否開啓平移功能，highcharts 默認是 false，highstock 默認爲 true
panKey：平移按鍵，對應的是鍵盤的鍵名，例如 ’Shift’， ‘ctrl’ 。對於 highcharts，開啓平移後，還需要設置 pankey，對應的操作是縮放圖表後，按鈕指定按鍵就可以平移了；對於 Highstock 則沒有這個配置，默認平移是直接拖動操作的。
pinchType：同 zoomType，用於移動端手勢操作縮放方向。