图表缩放（Zoom）
最后更新于：2022-04-01 22:26:31
# 图表缩放（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）
';