5.5 圖例的導(dǎo)航

當(dāng)圖例項(xiàng)目采用垂直排列的時(shí)候，如果圖例項(xiàng)目過(guò)渡，會(huì)超過(guò)圖表的高度，或超過(guò)圖例區(qū)的最大高度（由配置項(xiàng)maxHeight設(shè)置）。這時(shí)，會(huì)出現(xiàn)一個(gè)分頁(yè)導(dǎo)航按鈕區(qū)域，如圖5.31所示。

圖5.31 圖例的導(dǎo)航

導(dǎo)航按鈕區(qū)域由向上翻頁(yè)按鈕、向下翻頁(yè)按鈕和頁(yè)碼3部分組成。這3部分都是由Highcharts提供的legend.navigation組件實(shí)現(xiàn)。其語(yǔ)法如下：

legend: {
    navigation: {
        //配置項(xiàng)
    }
}

1．設(shè)置翻頁(yè)按鈕狀態(tài)

翻頁(yè)按鈕是導(dǎo)航區(qū)最常用的部分。為了方便用戶操作，Highchart為按鈕設(shè)置兩種狀態(tài)：可用和不可用。當(dāng)后續(xù)沒(méi)有圖例項(xiàng)目頁(yè)操作，就進(jìn)入不可用狀態(tài)。否則，就處于可用狀態(tài)。用戶可以使用配置項(xiàng)activeColor和inactiveColor設(shè)定兩種狀態(tài)的顏色。其語(yǔ)法如下：

activeColor: Color1
inactiveColor: Color2

其中，參數(shù)Color1設(shè)置按鈕可用狀態(tài)下的顏色，默認(rèn)值為#3E576F；參數(shù)Color2設(shè)置按鈕不可用狀態(tài)下的顏色，默認(rèn)值為#CCC。

2．設(shè)置翻頁(yè)按鈕的大小

用戶不僅可以定制按鈕不同狀態(tài)的顏色，還可以定制按鈕的大小。這時(shí)，需要使用配置項(xiàng)arrowSize。其語(yǔ)法如下：

arrowSize: Number

其中，參數(shù)Number用來(lái)設(shè)置按鈕的大小，單位為px，默認(rèn)值為12。

3．設(shè)置頁(yè)碼樣式

頁(yè)碼可以很好地展現(xiàn)當(dāng)前頁(yè)的位置，便于用戶決定后續(xù)的操作。Highcharts提供了配置項(xiàng)style用來(lái)設(shè)定頁(yè)碼的樣式。其語(yǔ)法如下：

style: CSSObject

其中，參數(shù)CSSObject用來(lái)設(shè)置頁(yè)碼文字的樣式，如字體顏色、大小和加粗等。

4．啟用翻頁(yè)動(dòng)畫(huà)

在翻頁(yè)的時(shí)候，Highcharts默認(rèn)添加翻頁(yè)動(dòng)畫(huà)。對(duì)于該動(dòng)畫(huà)效果，用戶可以禁用，也可以重新定義對(duì)應(yīng)的動(dòng)畫(huà)。用戶需要設(shè)置的配置項(xiàng)為animation。其語(yǔ)法如下：

animation: Boolean|Object

其中，配置項(xiàng)animation的值可以為布爾類型，也可以為對(duì)象類型。

當(dāng)為布爾類型時(shí)，值為true時(shí)，表示啟用翻頁(yè)動(dòng)畫(huà)；值為false時(shí)，表示禁止。默認(rèn)值為true。

當(dāng)為對(duì)象類型時(shí)，用戶可以定制動(dòng)畫(huà)效果和持續(xù)事件等內(nèi)容。