网页图表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