0
我使用jqplot圖在我的jsp頁面現在有更多的則是6個圖表我顯示我的一個JSP頁面如何將加載器圖像放入Jqplot圖表直到數據完全被提取，然後顯示圖表？
- 我的問題是爲每個圖表有哪些要求從數據庫 的數據AJAX請求獲取結果，並顯示在圖表...它 發生時，有成千上萬的數據庫中的行一段時間..
，所以我希望把一些加載圖像中的每個格和顯示圖表時div的圖表AJAX請求已完成。
- 我已經嘗試的事情，但沒有成功..當我試圖通過（「＃FL2」）把 圖像。innerHTML的時候AJAX啓動和成功，我只是 刪除圖像，然後它不是我的填充jqplot圖表
下面是該圖表加載
在我的jsp頁面我的DIV的一個
<div id="fl_3"style="height: 250px; width: 100%; margin: 50px auto 0"></div>
和我的AJAX功能如下其genrate圖表
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成功 希望任何一個拿到了解決方案...我知道應該有一些簡單的解決辦法，但在阿賈克斯倒沒精通..