这是HTML代码:
<body>
<div data-role="page" id="missingNamazHistory">
<div data-role="header" data-theme="b"></div>
<div data-role="content">
<div id="chart1" style="width: 600px; height: 350px;"></div>
<a href="#" data-role="button" id="updateMissingNamaz">update
Missing Prayer</a>
</div>
</div>
</body>
从数据库中获取值并显示图形的代码。
$('#missingNamazHistory').live('pageshow', function() {getMissedNamazFromDB();$('#updateMissingNamaz').off('click').on('click', function() {
getAllMissingNamaz();
$.mobile.changePage('#missingPrayerAtRegistrationPg', {
transition : "none",
changeHash : true,
reloadPage : false
}, false, true);
});
});
function getMissedNamazFromDB() { //alert("getMissedNamazFromDB");
db.transaction(function(tx) {
tx.executeSql(
'SELECT ump.missing_prayers FROM user_missing_prayers ump WHERE ump.user_id ="'
+ window.localStorage.getItem("userid")
+ '" ORDER BY missing_prayers ASC',[],
successCBofMissedNamazFromDB, errorCBofMissedNamazFromDB);
}, errorCB, successCB);
}
function successCBofMissedNamazFromDB(tx, results) {
if (results != null && results.rows.length > 0 && results.rows != null) {
for ( var i = 0; i <results.rows.length; i++) {
prayersData[i] = results.rows.item(i).missing_prayers;
}
drawGraph();
} else {
console.log("no records..... Graph cannot be seen");}
function errorCBofMissedNamazFromDB() {
console.log("errorCB MissedNamazFromDB:");
}
function drawGraph() {
alert("draw graph");
plot1 = null;
//$('#chart1').empty().trigger('create');
s1 = [ prayersData[0], 0, 0, 0, 0 ];
s2 = [ 0, prayersData[1], 0, 0, 0 ];
s3 = [ 0, 0, prayersData[2], 0, 0 ];
s4 = [ 0, 0, 0, prayersData[3], 0 ];
s5 = [ 0, 0, 0, 0, prayersData[4] ];
// var s = [getF,getZ,getA,getM,getI];
var ticks = [ 'FAJR', 'ZOHAR', 'ASR', 'MAGHRIB', 'ISHA' ];
//var plot1 = $.jqplot('#chart1',[s],
plot1 = $.jqplot('chart1', [ s1, s2, s3, s4, s5 ], {
// The "seriesDefaults" option is an options object that will
// be applied to all series in the chart.
seriesDefaults : {
title : 'Namaz Vs MissingPrayer',
renderer : $.jqplot.BarRenderer,
rendererOptions : {
fillToZero : true
}
},
series : [{
label : 'Fajr'
}, {
label : 'ZOHAR'
}, {
label : 'ASR'
}, {
label : 'MAGHRIB'
}, {
label : 'ISHA'
}
],
legend : {
show : true,
placement : 'outsideGrid'
},
axes : {
// Use a category axis on the x axis and use our custom ticks.
xaxis : {
renderer : $.jqplot.CategoryAxisRenderer,
label : 'NAMAZ',
ticks : ticks,
},
// Pad the y axis just a little so bars can get close to, but
// not touch, the grid boundaries. 1.2 is the default padding.
yaxis : {
min : 0,
label : 'MISSING PRAYERS',
pad : 1.05,
tickOptions : {
formatString : '%d'
}
}
}
}).replot();}
此代码第一次运行良好,但是当尝试单击“updateMissingNamaz”按钮并打开一个我可以在其中编辑信息的页面时,该信息是可编辑的并在 DB 中成功更新,但无法从 DB 存储的更新值中绘制图形.但每次在图中得到不同的值。