5.5 图例的导航

当图例项目采用垂直排列的时候，如果图例项目过渡，会超过图表的高度，或超过图例区的最大高度（由配置项maxHeight设置）。这时，会出现一个分页导航按钮区域，如图5.31所示。

图5.31 图例的导航

导航按钮区域由向上翻页按钮、向下翻页按钮和页码3部分组成。这3部分都是由Highcharts提供的legend.navigation组件实现。其语法如下：

legend: {
    navigation: {
        //配置项
    }
}

1．设置翻页按钮状态

翻页按钮是导航区最常用的部分。为了方便用户操作，Highchart为按钮设置两种状态：可用和不可用。当后续没有图例项目页操作，就进入不可用状态。否则，就处于可用状态。用户可以使用配置项activeColor和inactiveColor设定两种状态的颜色。其语法如下：

activeColor: Color1
inactiveColor: Color2

其中，参数Color1设置按钮可用状态下的颜色，默认值为#3E576F；参数Color2设置按钮不可用状态下的颜色，默认值为#CCC。

2．设置翻页按钮的大小

用户不仅可以定制按钮不同状态的颜色，还可以定制按钮的大小。这时，需要使用配置项arrowSize。其语法如下：

arrowSize: Number

其中，参数Number用来设置按钮的大小，单位为px，默认值为12。

3．设置页码样式

页码可以很好地展现当前页的位置，便于用户决定后续的操作。Highcharts提供了配置项style用来设定页码的样式。其语法如下：

style: CSSObject

其中，参数CSSObject用来设置页码文字的样式，如字体颜色、大小和加粗等。

4．启用翻页动画

在翻页的时候，Highcharts默认添加翻页动画。对于该动画效果，用户可以禁用，也可以重新定义对应的动画。用户需要设置的配置项为animation。其语法如下：

animation: Boolean|Object

其中，配置项animation的值可以为布尔类型，也可以为对象类型。

当为布尔类型时，值为true时，表示启用翻页动画；值为false时，表示禁止。默认值为true。

当为对象类型时，用户可以定制动画效果和持续事件等内容。