网页图表Highcharts实践教程之标签组与载入动画
網(wǎng)頁圖表Highcharts實踐教程之標簽組與載入動畫
Highcharts標簽組
在圖表的大部分元素都提供了標簽功能。但很多時候，我們需要額外說明一些信息。這個時候借助原有的圖表元素的標簽功能就不是很方便。Highcharts為用戶提供了標簽組功能。使用該功能可以在圖表區(qū)的任意位置添加一個或者多個標簽，如圖3.9所示。該圖表中在副標題前面增加一個標簽，用以說明數(shù)據(jù)列展現(xiàn)的年份。
?
圖3.9??標簽組的應(yīng)用
Highcharts標簽組的結(jié)構(gòu)
在Highcharts中，標簽組使用labels組件實現(xiàn)。其語法形式如下：
?
- labels:{
- ? ? //相關(guān)配置項
- }
?
由于標簽組不隸屬于任何圖表元素，所以它不作為其他圖表元素的子項，而直接包含在圖表選項中。
Highcharts構(gòu)建標簽
顧名思義，標簽組是由一組標簽構(gòu)成。在使用的時候，用戶可以定義一個，也可以定義多個標簽。標簽組中標簽使用items組件構(gòu)成。其語法如下：
?
- items: [{
- ? ? //配置項
- },
- {
- ? ? //配置項
- }
- .........????????? //可以是很多項
- ]
?
其中，每個標簽都由一個花括號括起來；多個標簽使用逗號分隔，然后用[]括起來。
構(gòu)建標簽，主要使用配置項html和style來設(shè)定標簽內(nèi)容和位置。其語法如下：
?
- html:String1
- style:CSSObject
?
其中，參數(shù)String指定標簽內(nèi)容，該值可以是HTML代碼，也可以是純文本內(nèi)容。參數(shù)CSSObject指定標簽的顯示位置，包含left和top配置項。其語法如下：
?
- left:Number1
- top:Number2
?
其中，參數(shù)Number1表示標簽的水平方向偏移距離，單位為px，默認值為0；參數(shù)Number2表示標簽的垂直方向偏移距離，單位為px，默認值為0。
注意：必須設(shè)置style，包括其中兩個配置項left和top中的一個，這樣才能顯示標簽。否則，光有配置項html是無法顯示標簽的。
【實例3-9：items】下面實現(xiàn)圖3.9的標簽效果。修改代碼如下：
?
- ? ? ? ? ? ? ? ??labels: {
- ? ? ? ? ? ? ? ? ? ? items: [{????????????????????????????????????????????????????????? //添加標簽
- ? ? ? ? ? ? ? ? ? ? ? ? html: '2013年-2015年',????????????????????? //設(shè)置標簽內(nèi)容
- ? ? ? ? ? ? ? ? ? ? ? ? style: {??????????????????????????????????????????????????? //設(shè)置標簽位置
- ? ? ? ? ? ? ? ? ? ? ? ? ? ? left: 10,?????????????????????????????????????????? //設(shè)置水平位置
- ? ? ? ? ? ? ? ? ? ? ? ? ? ? top:-25?????????????????????????????????????????? //設(shè)置垂直位置
- ? ? ? ? ? ? ? ? ? ? ? ??}
- ? ? ? ? ? ? ? ? ? ??}]
- ? ? ? ? ? ? ? ??}
?
執(zhí)行后，效果如圖3.9所示。從圖中可以看到，標簽?zāi)J以繪圖區(qū)的左上角作為原點。配置項x和y都是相對該點計算的。
Highcharts設(shè)置標簽的樣式
在組件items中，可以通過配置項html指定HTML腳本的方式來設(shè)定每個標簽的文本樣式。為了設(shè)置方便，Highcharts還為組件labels提供配置項style來設(shè)定所有的的標簽樣式。其語法如下：
?
- style:CSSObject
?
其中，參數(shù)CSSObject用來指定所有標簽共同的CSS樣式。其默認值為{color: '#3E576F'}。
用戶可以根據(jù)自己的需要添加特定的樣式。
Highcharts載入動畫
載入動畫是一個過渡動畫。當圖表加載數(shù)據(jù)需要時間較長，而無法展現(xiàn)圖表數(shù)據(jù)，可以使用加載動畫。其效果如圖3.10所示。加載動畫位于繪圖區(qū)，會覆蓋繪圖區(qū)原有內(nèi)容，并中心顯示提示內(nèi)容Loading...。
?
圖3.10??載入動畫
Highcharts顯示載入動畫
輸入動畫和前面的圖表元素不同，它并不會自動顯示。它需要使用圖表對象來顯式調(diào)用。這時需要使用方法showloading()。其語法如下：
?
- chart.showloading(String str)
?
其中，chart必須是圖表對象；參數(shù)str指定組件loading的配置項。該方法返回值為null。
載入動畫除了在方法showloading的參數(shù)指定，還可以在圖表選項中指定。其語法形式如下：
?
- loading:{
- ? ? //相關(guān)配置項
- }
?
【實例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);???????????????????????? //創(chuàng)建圖表動畫
- ? ? ? ? ? ? chart = $('#container').highcharts();???????????????????????? //獲取圖表對象
- ? ? ? ? ? ??chart.showLoading();??????????????????????????????????????????????? //顯示載入動畫
- ? ? ? ? ? ?
- ? ? ? ??});
- ? ??</script>
?
執(zhí)行后，效果如圖3.11所示。
?
圖3.11??顯示載入動畫
載入動畫并不會自動消失。如果取消載入動畫，需要再使用圖表對象的hideloading()方法。其語法如下：
?
- chart.hideloading()
?
其中，chart表示圖表對象；該方法沒有參數(shù)，返回值為null。
Highcharts本地化載入動畫
從圖3.11中可以看到，載入動畫默認的提示內(nèi)容是Loading...。對于國內(nèi)使用者，這并不友好。用戶可以對提示內(nèi)容本地化。需要使用到組件lang的配置項loading。其語法如下：
?
- loading: String
?
其中，參數(shù)String用來指定載入動畫顯示的提示內(nèi)容。默認值為loading...。
【實例3-11：customloading】下面對載入動畫的提示內(nèi)容實現(xiàn)本地化，將其修改為“數(shù)據(jù)載入中...”。修改代碼如下：
?
- ? ? ? ??Highcharts.setOptions({
- ? ? ? ? ? ??lang: {
- ? ? ? ? ? ? ? ??loading: '數(shù)據(jù)載入中...'??????????????????????????????????????????????????????? //設(shè)置載入動畫的提示內(nèi)容
- ? ? ? ? ? ??}
- ? ? ? ??});
?
執(zhí)行后，效果如圖3.12所示。
?
圖3.12??本地化載入動畫
注意：對載入動畫實施本地化，并不是設(shè)置組件loading的配置項，而是組件lang中設(shè)置。
Highcharts設(shè)置動畫效果
為了使載入動畫更符合當前圖表的需要，用戶可以借助Highcharts提供的配置項對動畫進行定制。下面依次講解常用的幾種定制方式。
1.設(shè)置動畫區(qū)域的樣式
載入動畫的區(qū)域覆蓋了繪圖區(qū)。這樣，顯示載入動畫的時候，就可以遮擋繪圖區(qū)的顯示，起到提示用戶的作用。該區(qū)域可以使用組件loading的配置項style進行設(shè)置。其語法如下：
?
- style: CSSObject
?
其中，參數(shù)CSSObject指定載入動畫區(qū)域的CSS樣式。默認值如下：
?
- {
- ? ? ? ? ?position: 'absolute',
- ? ? ? ? ?backgroundColor: 'white',
- ? ? ? ? ?opacity: 0.5,
- ? ? ? ? ?textAlign: 'center'
- }
?
2.設(shè)置提示內(nèi)容樣式
雖然提示提示內(nèi)容支持一定的HTML的標簽，但更好的方式是使用配置項labelStyle。其語法如下：
?
- labelStyle: CSSObject
?
其中，參數(shù)CSSObject指定動畫提示內(nèi)容的CSS樣式。默認值如下：
?
- {
- ? ? ? ? ?"fontWeight": "bold",
- ? ? ? ? ?"position": "relative",
- ? ? ? ? ?"top": "45%"
- }
?
3.設(shè)置動畫效果
除了設(shè)置各種CSS樣式外，用戶還可以設(shè)置動畫的淡入、淡出效果的持續(xù)時間。這時，需要使用配置項showDuration和hideDuration。其語法如下：
?
- showDuration: Number1
- hideDuration: Number2
?
其中，參數(shù)Number1指定淡入動畫持續(xù)時間，單位為毫秒ms，默認值為100；參數(shù)Number2指定淡出動畫持續(xù)時間，單位為毫秒ms，默認值為100。
【實例3-12：loading】下面重新設(shè)定載入動畫的淡入效果持續(xù)時間，修改代碼如下：
?
- ? ? ? ? ? ? ? ??loading: {
- ? ? ? ? ? ? ? ? ? ??showDuration: 1000,?????????????????????? //設(shè)置淡入效果持續(xù)時間
- ? ? ? ? ? ? ? ? ? ??hideDuration: 1000?????????????????????????? //設(shè)置淡出效果持續(xù)時間
- ? ? ? ? ? ? ? ??}
?
注意：淡入效果只有在顯示載入動畫時候才有效；反之，淡出效果只在隱藏載入動畫時有效。
本文選自：網(wǎng)頁圖表Highcharts實踐教程基礎(chǔ)篇大學霸內(nèi)部資料，轉(zhuǎn)載請注明出處，尊重技術(shù)尊重IT人！
轉(zhuǎn)載于:https://www.cnblogs.com/daxueba-ITdaren/p/4568432.html
總結(jié)
以上是生活随笔為你收集整理的网页图表Highcharts实践教程之标签组与载入动画的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Spring Boot错误errMsg:
- 下一篇： python之网络编程 --- TCP编