3.4 图表缩放
Highcharts为图表提供缩放功能。为图表添加缩放功能后，当图表中的数据较多时，可以放大局部数据，便于用户查看数据细节。本节将讲解图表缩放功能的设置。
3.4.1 图表缩放类型
Highcharts提供了3种缩放方式。这3种方式都是通过配置项zoomType来设置的。语法如下：
zoomType: String
其中，参数String指定缩放的方式。其值有以下几种。
None：表示没有缩放，这是默认值；
x：表示沿x轴方向缩放；
y：表示沿y轴方向缩放；
xy：表示沿x轴和y轴同时缩放。
【实例3-12：zoomType】下面为实例1-1的图表添加x轴方向的缩放。修改代码如下：
chart: {
type: 'line',
borderWidth:1,
zoomType:'x' //设置x轴缩放
},
执行代码后，在绘图区中，使用鼠标沿着x轴方向拖动，会产生一个选择区域，如图3.15所示。松开鼠标后，图表会沿x轴方向放大，并多显示一个Reset zoom按钮，运行效果如图3.16所示。当单击Reset zoom按钮时，将恢复原始的大小。
图3.15 沿着x轴方向拖动鼠标
图3.16 x轴缩放后的图表
当参数zoomType设置为y或者xy后，拖动的方式有所不同，产生的选择区域也不同，分别如图3.17和图3.18所示。
图3.17 沿着y轴方向拖动鼠标
图3.18 同时沿着x轴、y轴方向拖动鼠标
3.4.2 填充选择区
在缩放的时候，为了便于用户识别选择的范围，选择区域会被自动填充。通过配置项selectionMarkerFill，用户可以修改填充的颜色和透明度。语法如下：
selectionMarkerFill: Color
其中，参数Color指定填充颜色的RGB值和透明度。默认值为'rgba(69,114,167,0.25)'。
【实例3-13：selectionMarkerFill】修改实例3-12的默认填充颜色的透明度。修改后的代码如下：
chart: {
type: 'line',
borderWidth: 1,
selectionMarkerFill: 'rgba(69,114,167,0.90)', //设定填充颜色
zoomType:'x'
},
执行代码后，效果如图3.19所示。从图中可以看出，填充颜色并没有发生变化，但透明度降低了。
图3.19 设置填充颜色
3.4.3 重置按钮
当图表缩放后，图表会增加一个显示元素——Reset zoom按钮，如图3.20所示。当用户的鼠标移动到该按钮上，还会弹出一个提示框，提示用户单击该按钮后，将回到1:1的比例。该按钮由chart的子组件resetZoomButton实现。下面详细介绍重置按钮的各项设置。
图3.20 重置按钮
1．本地化Reset zoom按钮
Reset zoom按钮的名称和提示框内容都是英文的。这不太符合我们国内的需要。用户需要将其本地化。Highcharts提供一个本地化组件lang来实现基础元素的本地化工作。其语法如下：
Highcharts.setOptions({
lang: {
//配置项
}
});
在这里，Reset zoom按钮需要使用到两个配置项resetZoom和resetZoomTitle。其中，resetZoom用来设置按钮的文本内容；resetZoomTitle用来设置提示框的文本内容。其语法如下：
resetZoom: String1 resetZoomTitle: String2
其中，String1表示本地化的按钮文本内容；String2表示本地化的提示框文本内容。
【实例3-14：resetZoomlang】下面将Reset zoom按钮实现本地化。添加代码如下：
Highcharts.setOptions({
lang: {
resetZoom: '原始大小', //本地化按钮文本
resetZoomTitle: '回到初始状态1:1' //本地化提示框文本
}
});
执行代码后，效果如图3.21所示。
图3.21 本地化Reset zoom按钮
2．设置位置position
配置项position用来指定Reset zoom按钮显示的位置。其语法如下：
position:Object
其中，参数Object是一个位置对象，用来指定该按钮的对齐方式和位置坐标。该Object的结构如下所示：
{
align：String1,
verticalAlign:String2,
x:Number1,
y:Number2
}
配置项align用来指定水平对齐方式。String1的值可以为left、center和right，默认值为right；
配置项verticalAlign用来指定垂直对齐方式。String2的值可以为top、middle和bottom，默认值为top；
配置项x用来指定水平偏移坐标值；
配置项y用来指定垂直偏移坐标值。
由于涉及坐标轴的确定和坐标偏移，所以这里详细讲解绘制过程中，按钮位置的计算方式。主要包括以下3步。
（1）根据配置项align确定x坐标轴的位置，如图3.22所示。
图3.22 水平对齐方式下的x轴位置
注意：根据对齐方式不同，x轴的起始点不同。
（2）根据配置项verticalAlign确定y坐标轴的位置，如图3.23所示。
图3.23 垂直对齐方式下的y轴位置
注意：根据对齐方式不同，y轴的起始点不同。
（3）确定x、y坐标轴后，根据配置项x、y确定按钮的偏移位置。如果值为正的，就顺着坐标轴方向偏移；否则，反向偏移。
对于{align:center,verticalAlign:middle,x:40,y:20}来说，其Reset zoom按钮位置如图3.24所示。
图3.24 示例位置
【实例3-15：resetZoomButton】下面不采用默认设置，重新设置Reset zoom按钮的位置。修改代码如下：
chart: {
type: 'line',
borderWidth: 1,
zoomType: 'x',
resetZoomButton: {
position: {
align: 'left',
verticalAlign: 'bottom',
x: 20,
y:-50
}
}
},
执行代码后，效果如图3.25所示。
图3.25 修改Reset zoom按钮位置
3．相对位置relativeTo
设置按钮的对齐方式时，实际还涉及对齐方式所参考的标准。上面讲解的都是基于绘图区的。Highcharts还允许用户基于图表区进行对齐。这时候需要使用配置项relativeTo。其语法如下：
relativeTo:String
其中，参数String用来指定参考标准。其值可以为'plot'、'chart'中的一个。默认是'plot'。
【实例3-16：relativeTo】修改实例3-15的代码，将参考标准从默认的plot，改为chart。修改代码如下：
chart: {
type: 'line',
borderWidth: 1,
zoomType: 'x',
resetZoomButton: {
relativeTo:'chart', //修改参考标准
position: {
align: 'left',
verticalAlign: 'bottom',
x: 20,
y:-50
}
}
},
执行代码后，效果如图3.26所示。从图中可以明显看出，Reset zoom按钮由原有的绘图区的位置移动到绘图区的下边。
图3.26 修改参考标准
4．设置按钮样式配置项theme
用户除了可以设置复原按钮的位置，还可以进一步对按钮的样式进行设定。这时，需要使用属性theme。其语法如下：
theme:Object
其中，参数Object用来设置按钮的各项属性。
3.4.4 缩放后的刻度计算
在沿着x轴缩放过程中，Highcharts会根据显示区域的数值重新计算y轴的刻度。这样便于浏览者更好地查看缩放后的数据，但也会让浏览者无法看到该部分数据相对其他数据的趋势。为了避免这种情况发生，Highcharts从4.1.6版本开始，在配置项series中增加了一个新的配置项getExtremeFromAll。其语法如下：
getExtremesFromAll: Boolean
该配置项的值为布尔类型。当值为true时，y轴刻度将不会重新计算；否则，y轴刻度会重新计算。默认值为false。
【实例3-17：getExtremesFromAll】下面设置缩放过程中y轴的计算方式。核心代码如下：
series: [{
data: [7, 11, 8, 7, 9, 9, 9,45,23,56,11,89],
getExtremesFromAll:true //设置y轴是否重新计算
}]
执行代码后，效果如图3.27所示。从图中可以看出，缩放后y轴的刻度没有发生变化。
图3.27 禁止y轴刻度重新计算
但是，如果将配置项getExtremesFromAll设置为false后，运行结果如图3.28所示。这时y轴刻度是重新计算的。
图3.28 允许y轴刻度重新计算
3.4.5 缩放扩展：延x轴缩小
严格意义上讲，Highcharts只提供了放大功能，并没有提供缩小功能。如果用户想缩小坐标轴，只能通过重置按钮回到原来的大小，再重新缩放。该功能可以通过第三方插件Zoom Out Selection来实现，其下载地址为https://github.com/RolandBanguiran/highstock-zoom-out-selection/archive/master.zip。添加该插件后，用户可以从右向左选择区域时将缩小显示。
【实例3-18：zoomoutx】下面设置图表可以在x轴方向缩小。操作过程如下所述。
（1）下载插件包，并解压。获取其中的脚本文件zoomout-selection.js。
（2）将该脚本文件加入网页中，代码如下：
<script src="zoomout-selection.js"></script>
（3）启用x轴缩放功能。代码如下：
chart: {
zoomType:'x'
}
执行代码后，从左向右框选区域，放大图表，效果如图3.29所示。当从右向左框选区域后，缩小图表，效果如图3.30所示。
图3.29 放大图表
图3.30 缩小图表