网页图表Highcharts实践教程之标签组与载入动画
網頁圖表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】下面在圖表中顯示載入動畫，修改代碼如下：
?
- ? ??<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人！
轉載于:https://www.cnblogs.com/daxueba-ITdaren/p/4568432.html
總結
以上是生活随笔為你收集整理的网页图表Highcharts实践教程之标签组与载入动画的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Spring Boot错误errMsg:
- 下一篇： 结对项目 刘静 201303014059