我在我的 jsp 页面中使用 jqplot图表现在在我的一个 jsp 页面中显示超过 6 个图表
- 我的问题是对于每个图表都有一个 ajax 请求，它从数据库请求数据并获取结果并显示在图表中......当数据库中有数千行时需要一些时间..
所以我想在每个 div 中放置一些加载器图像，并在该 div 的图表 ajax 请求完成时显示图表。
- 我已经尝试过这些东西但没有成功..当我尝试通过 ("#fl2").innerHtml 放置图像时，当 ajax 启动并成功时，我只是删除了该图像，然后它不会填充我的 jqplot 图表
以下是我正在加载图表的 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。 .