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