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()
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#loading doesn't work for me.
在回调函数。但是用户看到一个空页面,我想给他们显示一个加载图片。这个:http://api.highcharts.com/highcharts#load对我不起作用。
Any ideas?
什么好主意吗?
4 个解决方案
#1
15
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();
});
}
#2
11
"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();
});
#3
4
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()
#4
0
You can define globally for each page using this plugin JQuery Block UI
您可以使用这个JQuery块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();
});
});
#1
15
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();
});
}
#2
11
"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();
});
#3
4
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()
#4
0
You can define globally for each page using this plugin JQuery Block UI
您可以使用这个JQuery块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();
});
});