私がやろうとしているのは、値が増減するたびに小さなアニメーションを再生することです。このコードでは、XML ソースから値を毎秒更新しています。アニメーションは、値が増加したときにのみ実行する必要があります。したがって、私の値が 62 で、62 に更新された場合、アニメーションは実行されません。値が 62 で、63 に更新されたとき、このアニメーションを発生させたいと思います。それを実現するためにこのコードを変更する方法を知っている人はいますか?
function updateAll()
{
$.ajax({
type: "GET",
url: "/ajax/ajax.updatedata.php",
data: "",
success: function(html){
html = JSON.parse(html);
if(html instanceof Object)
{
// projecten
$('#projecten-aantal').html(html['projecten'][0]['waarde']);
$('#projecten-afgerond').html(html['projecten'][1]['waarde']);
var projecten_aantal = parseInt(html['projecten'][0]['waarde']);
var projecten_afgerond = parseInt(html['projecten'][1]['waarde']);
var sampleDataProjecten = [
{ naam: html['projecten'][0]['naam'], waarde: parseInt(html['projecten'][0]['waarde']), percent: parseFloat(html['projecten'][0]['percent'])},
{ naam: html['projecten'][1]['naam'], waarde: parseInt(html['projecten'][1]['waarde']), percent: parseFloat(html['projecten'][1]['percent'])}
];
var settingsProjecten = {
enableAnimations: false,
source: sampleDataProjecten
};
$('#pie-chart-projecten').jqxChart(settingsProjecten);
$('#pie-chart-projecten').jqxChart('refresh');
// domeinwinkel
var aantalRegistraties = 0;
for(var i=0;i<=6;i++)
{
aantalRegistraties += parseInt(html['domeinwinkel'][i]['waarde']);
}
$('#domeinwinkel-registraties').html(aantalRegistraties);
var sampleDataDomeinwinkel = [
{ naam: html['domeinwinkel'][5]['naam'], waarde: parseInt(html['domeinwinkel'][5]['waarde']) },
{ naam: html['domeinwinkel'][4]['naam'], waarde: parseInt(html['domeinwinkel'][4]['waarde']) },
{ naam: html['domeinwinkel'][3]['naam'], waarde: parseInt(html['domeinwinkel'][3]['waarde']) },
{ naam: html['domeinwinkel'][2]['naam'], waarde: parseInt(html['domeinwinkel'][2]['waarde']) },
{ naam: html['domeinwinkel'][1]['naam'], waarde: parseInt(html['domeinwinkel'][1]['waarde']) },
{ naam: html['domeinwinkel'][0]['naam'], waarde: parseInt(html['domeinwinkel'][0]['waarde']) },
{ naam: html['domeinwinkel'][6]['naam'], waarde: parseInt(html['domeinwinkel'][6]['waarde']) }
];
var settingsDomeinwinkel = {
enableAnimations: false,
source: sampleDataDomeinwinkel
};
$('#line-chart-domeinwinkel').jqxChart(settingsDomeinwinkel);
$('#line-chart-domeinwinkel').jqxChart('refresh');
// serverload
var barcolors = new Array();
//Serverload bars
for(var i=0;i<=6;i++)
{
var setBarWidth = (parseFloat(html['servers'][i]['waarde'])/2)*100;
if(setBarWidth > 100)
{
barcolors[i] = 100;
}
else
{
barcolors[i] = setBarWidth;
}
}
$("[id^=serverload]").filter(function() {
var i = this.id.substring(10),
width = barcolors[i-1];
if (width !== undefined)
this.style.width = width + "%";
return width > 50;
}).addClass("redbar");
$("[id^=serverload]").filter(function() {
var i = this.id.substring(10),
width = barcolors[i-1];
if (width !== undefined)
this.style.width = width + "%";
return width <= 50;
}).removeClass("redbar");
}
else
{
console.log('Fout bij het updaten van de data: html is geen array');
console.log(html);
}
}
});
}
上記のコードに関する詳細情報:
上記のコードは、次のシーケンス (翻訳済み) のデータを含む XML ファイルから取得する値 (内部にテキストを含むスパン要素、および JQuery 折れ線グラフと円グラフ) を更新するためのものです。
<root>
<projects>
<entry>
<name>Total</name>
<value>10</value>
<percent>100</percent>
</entry>
<entry>
<name>Finished</name>
<value>5</value>
<percent>50</percent>
</entry>
</projects>
<tasks>
<entry>
<name>Total</name>
<value>20</value>
</entry>
</tasks>
etc.
</root>
XML ファイルは cron ジョブによって更新されるため、データベースや隠しフィールドを直接使用して値を保存することはありません。