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

時間 2019-11-05

原文原文鏈接

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

Highcharts標籤組

在圖表的大部分元素都提供了標籤功能。但不少時候，咱們須要額外說明一些信息。這個時候藉助原有的圖表元素的標籤功能就不是很方便。Highcharts爲用戶提供了標籤組功能。使用該功能能夠在圖表區的任意位置添加一個或者多個標籤，如圖3.9所示。該圖表中在副標題前面增長一個標籤，用以說明數據列展示的年份。javascript

圖3.9 標籤組的應用html

Highcharts標籤組的結構

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

labels:{ide
//相關配置項動畫
}spa

因爲標籤組不隸屬於任何圖表元素，因此它不做爲其餘圖表元素的子項，而直接包含在圖表選項中。.net

Highcharts構建標籤

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

items: [{htm
//配置項對象
},
{
//配置項
}
......... //能夠是不少項
]

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

構建標籤，主要使用配置項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】下面在圖表中顯示載入動畫，修改代碼以下：

<script type="text/javascript">
$(document).ready(function () {
var options = {
chart: {
type: 'line',
zoomType: 'x'
},
title: {
text: '北京一週最高溫度'
},
series: [{
name: '2015最高溫度',
data: [6, 6, 7, 4, 5, 6, 8]
}
],
credits: {
text: '大學霸',
href: 'http://daxueba.net'
}
};
var chart; //定義圖表變量
$('#container').highcharts(options); //建立圖表動畫
chart = $('#container').highcharts(); //獲取圖表對象
chart.showLoading(); //顯示載入動畫
});
</script>

執行後，效果如圖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人！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。