我在我的jsp页面中使用jqplot图表现在我的一个jsp页面中显示了超过6个图表
所以我想在每个div中放置一些加载器图像，并在div的图表ajax请求完成时显示图表。
以下是我正在加载图表的div之一
在我的jsp页面中
<div id="fl_3"style="height: 250px; width: 100%; margin: 50px auto 0"></div>
和我的ajax函数如下生成图表
function PieChartsCampByOrg(pUrl, pLoaderPath) {
// Setup the placeholder reference
$.ajax({
type : 'post',
url : pUrl,
success : function(rawdata)
{
var total = rawdata.split(";");
var totalcount = 0;
var txt = null;
for ( var i = 1; i < total.length - 1; i++)
{
if (i == 1) {
txt = "[{ label: \"" + total[i] + "\", data: "
+ total[i + 1] + "}";
}
else {
txt = txt + ", { label: \"" + total[i]
+ "\", data: " + total[i + 1] + "}"; }
totalcount = parseInt(totalcount) + parseInt(total[i + 1]);
i++;
}
txt = txt + "];";
if (totalcount == 0 || data == null || data == 'undefined') {
labeltext = "Total Campaign: "
+ totalcount
+ " <br> Statistic Type: Campaigns By Organization";
} else {
labeltext = "Total Campaign: "
+ totalcount
+ " <br> Statistic Type: Campaigns By Organization";
}
document.getElementById('piecamporg').innerHTML = labeltext;
elem = $('#fl_3');
var data = eval(txt);
// Setup the flot chart using our data
$.plot(elem, data, {
//
//
series: {
pie: {
show: true,
radius: 1,
label: {
show: false,
radius: 2 / 3,
formatter: function (label, series) {
return '<div style="font-size:7pt;text-align:center;padding:2px;color:white;">' + label + '<br/>' + series.data[0][1] + '</div>';
},
threshold: 0.1
}
}
},
grid : {
hoverable : true,
clickable : true
},
colors : [ "#245779", "#85c441", "#e88b2f", "#bb43f2",
"#3073a0", "#9C2323", "#183b52", "#8cc7e0",
"#64b4d5", "#3ca0ca", "#2d83a6", "#22637e",
"#174356", "#0c242e" ]
// colors: [ "#b4dbeb", "#8cc7e0", "#64b4d5", "#3ca0ca",
// "#2d83a6", "#22637e", "#174356", "#0c242e" ]
});
// Create a tooltip on our chart
elem.qtip({
prerender : true,
content : 'Loading...', // Use a loading message
// primarily
position : {
viewport : $(window), // Keep it visible within
// the window if possible
target : 'mouse', // Position it in relation to
// the mouse
adjust : {
x : 7
}
// ...but adjust it a bit so it doesn't overlap it.
},
show : true, // We'll show it programatically, so no
// show event is needed
style : {
classes : 'ui-tooltip-shadow ui-tooltip-tipsy',
tip : false
// Remove the default tip.
}
});
// Bind the plot hover
elem
.on(
'plothover',
function(event, pos, obj) {
// Grab the API reference
var self = $(this), api = $(this)
.qtip(), previousPoint, content,
// Setup a visually pleasing rounding
// function
round = function(x) {
return Math.round(x * 1000) / 1000;
};
// If we weren't passed the item object,
// hide the tooltip and remove cached
// point data
if (!obj) {
api.cache.point = false;
return api.hide(event);
}
// Proceed only if the data point has
// changed
previousPoint = api.cache.point;
if (previousPoint !== obj.seriesIndex) {
percent = parseFloat(
obj.series.percent)
.toFixed(2);
// Update the cached point data
api.cache.point = obj.seriesIndex;
// Setup new content
content = obj.series.label + ' ('
+ obj.series.data[0][1] + ')';
// Update the tooltip content
api.set('content.text', content);
// Make sure we don't get problems
// with animations
// api.elements.tooltip.stop(1, 1);
// Show the tooltip, passing the
// coordinates
api.show(pos);
}
});
}
});
}
上面是我的ajax调用...它非常复杂的功能，但我只想显示加载器直到ajax成功 希望任何人都能得到解决方案......我知道应该有一些简单的解决方案，但对ajax并不是很精通..
答案 0 :(得分：2)
要显示加载程序图像，您可以使用以下html结构：
<style type="text/css">
.loader_Image{
background-image: url('Path_to_loaderImage\loader.gif');
width:100%;
height:100%;
}
</style>
<div id="chart_Container" style="width:100%;height:100%;">
<div id="fl_3"style="height: 250px; width: 100%; margin: 50px auto 0"></div>
<div class="loader_Image"/>
</div>
<script type="text/javascript>
$(document).ready(function(){
$('.loader_Image').hide();
});
function PieChartsCampByOrg(pUrl, pLoaderPath) {
// Setup the placeholder reference
$('.loader_Image').show();
$('#fl_3').hide();
$.ajax({
type : 'post',
url : pUrl,
success : function(rawdata)
{
$('.loader_Image').hide();
$('#fl_3').show();
var total = rawdata.split(";");
var totalcount = 0;
var txt = null;
for ( var i = 1; i < total.length - 1; i++)
{
if (i == 1) {
txt = "[{ label: \"" + total[i] + "\", data: "
+ total[i + 1] + "}";
}
else {
txt = txt + ", { label: \"" + total[i]
+ "\", data: " + total[i + 1] + "}"; }
totalcount = parseInt(totalcount) + parseInt(total[i + 1]);
i++;
}
txt = txt + "];";
if (totalcount == 0 || data == null || data == 'undefined') {
labeltext = "Total Campaign: "
+ totalcount
+ " <br> Statistic Type: Campaigns By Organization";
} else {
labeltext = "Total Campaign: "
+ totalcount
+ " <br> Statistic Type: Campaigns By Organization";
}
document.getElementById('piecamporg').innerHTML = labeltext;
elem = $('#fl_3');
var data = eval(txt);
// Setup the flot chart using our data
$.plot(elem, data, {
//
//
series: {
pie: {
show: true,
radius: 1,
label: {
show: false,
radius: 2 / 3,
formatter: function (label, series) {
return '<div style="font-size:7pt;text-align:center;padding:2px;color:white;">' + label + '<br/>' + series.data[0][1] + '</div>';
},
threshold: 0.1
}
}
},
grid : {
hoverable : true,
clickable : true
},
colors : [ "#245779", "#85c441", "#e88b2f", "#bb43f2",
"#3073a0", "#9C2323", "#183b52", "#8cc7e0",
"#64b4d5", "#3ca0ca", "#2d83a6", "#22637e",
"#174356", "#0c242e" ]
// colors: [ "#b4dbeb", "#8cc7e0", "#64b4d5", "#3ca0ca",
// "#2d83a6", "#22637e", "#174356", "#0c242e" ]
});
// Create a tooltip on our chart
elem.qtip({
prerender : true,
content : 'Loading...', // Use a loading message
// primarily
position : {
viewport : $(window), // Keep it visible within
// the window if possible
target : 'mouse', // Position it in relation to
// the mouse
adjust : {
x : 7
}
// ...but adjust it a bit so it doesn't overlap it.
},
show : true, // We'll show it programatically, so no
// show event is needed
style : {
classes : 'ui-tooltip-shadow ui-tooltip-tipsy',
tip : false
// Remove the default tip.
}
});
// Bind the plot hover
elem
.on(
'plothover',
function(event, pos, obj) {
// Grab the API reference
var self = $(this), api = $(this)
.qtip(), previousPoint, content,
// Setup a visually pleasing rounding
// function
round = function(x) {
return Math.round(x * 1000) / 1000;
};
// If we weren't passed the item object,
// hide the tooltip and remove cached
// point data
if (!obj) {
api.cache.point = false;
return api.hide(event);
}
// Proceed only if the data point has
// changed
previousPoint = api.cache.point;
if (previousPoint !== obj.seriesIndex) {
percent = parseFloat(
obj.series.percent)
.toFixed(2);
// Update the cached point data
api.cache.point = obj.seriesIndex;
// Setup new content
content = obj.series.label + ' ('
+ obj.series.data[0][1] + ')';
// Update the tooltip content
api.set('content.text', content);
// Make sure we don't get problems
// with animations
// api.elements.tooltip.stop(1, 1);
// Show the tooltip, passing the
// coordinates
api.show(pos);
}
});
}
});
}
</script>