十五、基础教程-图表缩放（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 默认为 truepanKey：平移按键，对应的是键盘的键名，例如 ’Shift’， ‘ctrl’ 。对于 highcharts，开启平移后，还需要设置 pankey，对应的操作是缩放图表后，按钮指定按键就可以平移了；对于 Highstock 则没有这个配置，默认平移是直接拖动操作的。pinchType：同 zoomType，用于移动端手势操作缩放方向。