4.4 载入动画
载入动画是一个过渡动画。当图表加载数据需要的时间较长，而无法展现图表数据时，可以使用加载动画。其效果如图4.10所示。加载动画位于绘图区，会覆盖绘图区原有内容，中心显示提示内容Loading...。
图4.10 载入动画
4.4.1 显示载入动画
输入动画和前面的图表元素不同，它不会自动显示，需要使用图表对象来显式调用，这时需要使用方法showloading()。其语法如下：
chart.showloading(String str)
其中，chart必须是图表对象；参数str指定组件loading的配置项。该方法返回值为null。
载入动画除了在方法showloading()的参数指定，还可以在图表选项中指定。其语法形式如下：
loading:{
//相关配置项
}
【实例4-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>
执行代码后，效果如图4.11所示。
图4.11 显示载入动画
载入动画不会自动消失。如果取消载入动画，需要使用图表对象的hideloading()方法。其语法如下：
chart.hideloading()
其中，chart表示图表对象；该方法没有参数，返回值为null。
4.4.2 本地化载入动画
从图4.11中可以看到，载入动画默认的提示内容是Loading...。对于国内使用者，这并不友好。用户可以对提示内容本地化。需要使用到组件lang的配置项loading。其语法如下：
loading: String
其中，参数String用来指定载入动画显示的提示内容。默认值为loading...。
【实例4-11：customloading】下面对载入动画的提示内容实现本地化，将其修改为“数据载入中…”。修改代码如下：
Highcharts.setOptions({
lang: {
loading: '数据载入中...' //设置载入动画的提示内容
}
});
执行代码后，效果如图4.12所示。
图4.12 本地化载入动画
注意：对载入动画实施本地化，不是设置组件loading的配置项，而是在组件lang中设置。
4.4.3 设置动画效果
为了使载入动画更符合当前图表的需要，用户可以借助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。
【实例4-12：loading】下面重新设定载入动画的淡入效果的持续时间，修改代码如下：
loading: {
showDuration: 1000, //设置淡入效果持续时间
hideDuration: 1000 //设置淡出效果持续时间
}
注意：淡入效果只有在显示载入动画时候才有效；反之，淡出效果只在隐藏载入动画时有效。