網頁圖表Highcharts實踐教程之標籤組與載入動畫

Highcharts標籤組

在圖表的大部分元素都提供了標籤功能。但很多時候，我們需要額外說明一些資訊。這個時候藉助原有的圖表元素的標籤功能就不是很方便。Highcharts為使用者提供了標籤組功能。使用該功能可以在圖表區的任意位置新增一個或者多個標籤，如圖3.9所示。該圖表中在副標題前面增加一個標籤，用以說明資料列展現的年份。

圖3.9 標籤組的應用

Highcharts標籤組的結構

在Highcharts中，標籤組使用labels元件實現。其語法形式如下：

labels:{
//相關配置項
}

由於標籤組不隸屬於任何圖表元素，所以它不作為其他圖表元素的子項，而直接包含在圖表選項中。

Highcharts構建標籤

顧名思義，標籤組是由一組標籤構成。在使用的時候，使用者可以定義一個，也可以定義多個標籤。標籤組中標籤使用items元件構成。其語法如下：

items: [{
//配置項
},
{
//配置項
}
......... //可以是很多項
]

其中，每個標籤都由一個花括號括起來；多個標籤使用逗號分隔，然後用[]括起來。

構建標籤，主要使用配置項html和style來設定標籤內容和位置。其語法如下：

html:String1
style:CSSObject

其中，引數String指定標籤內容，該值可以是HTML程式碼，也可以是純文字內容。引數CSSObject指定標籤的顯示位置，包含left和top配置項。其語法如下：

left:Number1
top:Number2

其中，引數Number1表示標籤的水平方向偏移距離，單位為px，預設值為0；引數Number2表示標籤的垂直方向偏移距離，單位為px，預設值為0。

注意：必須設定style，包括其中兩個配置項left和top中的一個，這樣才能顯示標籤。否則，光有配置項html是無法顯示標籤的。

【例項3-9：items】下面實現圖3.9的標籤效果。修改程式碼如下：

labels: {
items: [{ //新增標籤
html: '2013年-2015年', //設定標籤內容
style: { //設定標籤位置
left: 10, //設定水平位置
top:-25 //設定垂直位置
}
}]
}

執行後，效果如圖3.9所示。從圖中可以看到，標籤預設以繪圖區的左上角作為原點。配置項x和y都是相對該點計算的。

Highcharts設定標籤的樣式

在元件items中，可以透過配置項html指定HTML指令碼的方式來設定每個標籤的文字樣式。為了設定方便，Highcharts還為元件labels提供配置項style來設定所有的的標籤樣式。其語法如下：

style:CSSObject

其中，引數CSSObject用來指定所有標籤共同的CSS樣式。其預設值為{color: '#3E576F'}。

使用者可以根據自己的需要新增特定的樣式。

Highcharts載入動畫

載入動畫是一個過渡動畫。當圖表載入資料需要時間較長，而無法展現圖表資料，可以使用載入動畫。其效果如圖3.10所示。載入動畫位於繪圖區，會覆蓋繪圖區原有內容，並中心顯示提示內容Loading...。

圖3.10 載入動畫

Highcharts顯示載入動畫

輸入動畫和前面的圖表元素不同，它並不會自動顯示。它需要使用圖表物件來顯式呼叫。這時需要使用方法showloading()。其語法如下：

chart.showloading(String str)

其中，chart必須是圖表物件；引數str指定元件loading的配置項。該方法返回值為null。

載入動畫除了在方法showloading的引數指定，還可以在圖表選項中指定。其語法形式如下：

loading:{
//相關配置項
}

【例項3-10：showloading】下面在圖表中顯示載入動畫，修改程式碼如下：

執行後，效果如圖3.11所示。

圖3.11 顯示載入動畫

載入動畫並不會自動消失。如果取消載入動畫，需要再使用圖表物件的hideloading()方法。其語法如下：

chart.hideloading()

其中，chart表示圖表物件；該方法沒有引數，返回值為null。

Highcharts本地化載入動畫

從圖3.11中可以看到，載入動畫預設的提示內容是Loading...。對於國內使用者，這並不友好。使用者可以對提示內容本地化。需要使用到元件lang的配置項loading。其語法如下：

loading: String

其中，引數String用來指定載入動畫顯示的提示內容。預設值為loading...。

【例項3-11：customloading】下面對載入動畫的提示內容實現本地化，將其修改為“資料載入中...”。修改程式碼如下：

Highcharts.setOptions({
lang: {
loading: '資料載入中...' //設定載入動畫的提示內容
}
});

執行後，效果如圖3.12所示。

圖3.12 本地化載入動畫

注意：對載入動畫實施本地化，並不是設定元件loading的配置項，而是元件lang中設定。

Highcharts設定動畫效果

為了使載入動畫更符合當前圖表的需要，使用者可以藉助Highcharts提供的配置項對動畫進行定製。下面依次講解常用的幾種定製方式。

1.設定動畫區域的樣式

載入動畫的區域覆蓋了繪圖區。這樣，顯示載入動畫的時候，就可以遮擋繪圖區的顯示，起到提示使用者的作用。該區域可以使用元件loading的配置項style進行設定。其語法如下：

style: CSSObject

其中，引數CSSObject指定載入動畫區域的CSS樣式。預設值如下：

{
position: 'absolute',
backgroundColor: 'white',
opacity: 0.5,
textAlign: 'center'
}

2.設定提示內容樣式

雖然提示提示內容支援一定的HTML的標籤，但更好的方式是使用配置項labelStyle。其語法如下：

labelStyle: CSSObject

其中，引數CSSObject指定動畫提示內容的CSS樣式。預設值如下：

{
"fontWeight": "bold",
"position": "relative",
"top": "45%"
}

3.設定動畫效果

除了設定各種CSS樣式外，使用者還可以設定動畫的淡入、淡出效果的持續時間。這時，需要使用配置項showDuration和hideDuration。其語法如下：

showDuration: Number1
hideDuration: Number2

其中，引數Number1指定淡入動畫持續時間，單位為毫秒ms，預設值為100；引數Number2指定淡出動畫持續時間，單位為毫秒ms，預設值為100。

【例項3-12：loading】下面重新設定載入動畫的淡入效果持續時間，修改程式碼如下：

loading: {
showDuration: 1000, //設定淡入效果持續時間
hideDuration: 1000 //設定淡出效果持續時間
}

注意：淡入效果只有在顯示載入動畫時候才有效；反之，淡出效果只在隱藏載入動畫時有效。

本文選自：網頁圖表Highcharts實踐教程基礎篇大學霸內部資料，轉載請註明出處，尊重技術尊重IT人！

網頁圖表Highcharts實踐教程之標籤組與載入動畫