jspページでjqplotチャートを使用 していますが、1つのjspページに6つ以上のチャートが表示されています
- 私の問題は、チャートごとに、データベースからデータを要求し、結果を取得してチャートに表示する ajax リクエストがあることです...データベースに何千行もある場合、時間がかかります..
そのため、各divにローダー画像を配置し、そのdivのチャートのajaxリクエストが完了したときにチャートを表示したいと考えています。
- 私は物事を試しましたが、成功しませんでした.. ajaxの開始時に( "#fl2").innerHtmlを介して画像を配置しようとしたとき、成功すると、その画像を削除するだけで、jqplotチャートにデータが入力されません
以下は、チャートがロードされている私のdivの1つです
私の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にあまり精通していません。 .