3.5 图表平移

当图表缩放后，图表往往会超出绘图区的显示范围，影响查看完整的数据。为了解决这个问题，Highcharts提供了图表平移功能。下面将讲解如何使用平移功能。

3.5.1 启用图表平移

平移功能默认是禁用的。启用该功能，需要设置配置项panning。其语法如下：

panning:Boolean

其中，参数Boolean是布尔值，确认是否启用平移功能。当其值为true时，启用该功能；当其值为false时，禁用该功能。默认值是false。

3.5.2 设置图表平移方式

由于缩放和平移都是通过鼠标操作，所以需要设置一个按键来实现缩放和平移操作的切换。这时候，需要使用配置项panKey。其语法如下：

panKey:String

其中，参数String表示按键的名称。常用的按键名称包括'ctrl'、'alt'和'shift'，分别表示Ctrl、Alt和Shift键。

【实例3-19：panKey】为实例3-16添加图表平移功能。修改代码如下：

chart: {
    type: 'line',
    borderWidth: 1,
    zoomType: 'x',
    panning: true,                                          //启用平移功能
    panKey:'ctrl',                                          //设置功能切换键
    resetZoomButton: {
        relativeTo: 'chart',
        position: {
            align: 'left',
            verticalAlign: 'bottom',
            x: 20,
            y: -50
        }
    }
},

执行代码后，效果如图3.31所示。当用户按住Ctrl键并单击鼠标左键后，鼠标指针就变成移动图表。这时，用户就可以左右移动图表，查看完整的图表数据。

图3.31 启用平移功能

3.5.3 设置延y轴平移

Highcharts只提供了x轴的水平平移。当y轴的数据较多时，就无法通过平移的方式进行浏览。这个时候，可以借助第三方插件Y-Axis Panning实现。该插件的下载地址为https://github.com/RolandBanguiran/highstock-yaxis-panning/archive/master.zip。使用该插件后，用户直接用鼠标就可以上下拖动图表。

【实例3-20：yaxispanning】下面为图表添加延y轴平移的功能。操作过程如下所述。

（1）下载该插件，并解压。获取其中的脚本文件yaxis-panning.js。

（2）在当前页面中引入该脚本。代码如下：

<script src="yaxis-panning.js"></script>

补充完整图表其他代码后，运行效果如图3.32所示。用鼠标向下拖动图表，效果如图3.33所示。

图3.32 初始状态

图3.33 向下平移