Javascript Highcharts 如何在设置数据处显示加载动画
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12148276/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Highcharts How to Show Loading Animation At Set Data
提问by kamaci
I have highcharts graphics. When I create my page I show empty graphics (I don't set data attribute and there is only titles of graphics, inside of them is empty.) I get data from server asynchronously and call
我有 highcharts 图形。当我创建我的页面时，我显示空图形（我没有设置数据属性，只有图形标题，里面是空的。）我从服务器异步获取数据并调用
setData()
设置数据（）
function at callback. However user sees an empty page and I want to show a loading image for them. This: http://api.highcharts.com/highcharts#loadingdoesn't work for me.
回调函数。但是用户看到一个空页面，我想为他们显示加载图像。这个：http: //api.highcharts.com/highcharts#loading对我不起作用。
Any ideas?
有任何想法吗？
回答by kamaci
I did it work as explained at given URL:
我按照给定的 URL 中的解释做了它：
function updateGraphic(url, chartName) {
chartName.showLoading();
$.getJSON(url, function(data){
chartName.series[0].setData(data);
chartName.hideLoading();
});
}
回答by Kadir Can
"Loading.." word seems too amateur. Use that trick instead
“加载中……”这个词似乎太业余了。改用那个技巧
var chart = new Highcharts.Chart(options);
chart.showLoading('<img src="/images/spinner.gif">');
$.getJSON(url, function(data){
//load data to chart
chart.hideLoading();
});
回答by AnkitG
This is a simple piece i always use to show the loading.
这是一个简单的部分，我总是用来显示加载。
let's say this is our container
假设这是我们的容器
<div id='container'>
<img id="spinner" src="/assets/chart_loader.gif"/>
</div>
And this is the piece of ajax that takes care to show when the getJson starts for the chart and hide when it stops.
这是一块 ajax，它负责显示 getJson 何时开始为图表显示并在它停止时隐藏。
$(document).ajaxStart ->
$("#spinner").show()
$(document).ajaxComplete ->
$("#spinner").hide()
回答by alhashmiya
You can define globally for each page using this plugin JQuery Block UI
您可以使用此插件JQuery Block UI为每个页面全局定义
and usage is
用法是
jQuery(document).ready(function ($) {
$.ajaxSetup({ cache: false });
$(document).ajaxStart(function () {
$('body').block({
message: '<h3><img alt="" class="GifIcon" src="Images/319.gif" />Please wait Data is Loading From Server ...... </h3>'
});
});
$(document).ajaxStop(function () {
$('body').unblock();
});
});
