Efeknya seperti terlihat pada gambar. Gambar akan bergerak setiap lima detik (sebenarnya gambar baru digambar), yang dapat menampilkan informasi CPU yang dipantau.
Fungsi pastCpuInfomation terutama digunakan untuk menampilkan diagram garis
Fungsi updateCpuPic menghapus gambar dari 5 detik yang lalu dan membuat gambar baru berdasarkan data yang ada.
Fungsi updateCpuInfomation menambahkan titik terbaru ke array penyimpanan polyline.
Kemudian atur dua pengatur waktu di antarmuka dan minta mereka untuk menjalankan updateCpuPic setiap 5 detik dan updateCpuInfomation setiap 1 menit, dan gambar akan mulai bergerak.
PS: Sebelum melakukan banyak operasi pada kode, waktu server saat ini akan diperoleh dari server. Penulisan ajax agak berantakan, dan saya tidak tahu apakah itu terstandarisasi sepertinya sangat bagus. Yang terbaik adalah memperbaruinya secara langsung. Data baris, saya harap teman-teman dapat memberi saya saran! Kode gambar tabelnya sudah ditandai dengan warna merah (baris 30 sd baris 60)
Copy kode kodenya sebagai berikut:
var past_cpu_service_statistics_line = Array baru();
var plot;
fungsi masa laluCpuInformasi() {
//Data CPU historis
// waktu setempat
$.ajax({
ketik: "POSTING",
tipe konten: "aplikasi/x-www-form-urlencoded;charset=UTF-8",
url: globalObj.path + '/server/getServerCurrentTime.htm',
sukses: fungsi(waktu saat ini){
console.log("Dapatkan waktu server"+Waktu saat ini);
//Dapatkan data cpu historis
$.ajax({
ketik: "POSTING",
tipe konten: "aplikasi/x-www-form-urlencoded;charset=UTF-8",
url: globalObj.path + '/server/getPastCpuMonitorData.htm',
// startTime endtime adalah data dummy, waktu diperoleh di latar belakang
data: "hostName=" + "login.cheos.cn",
sukses: fungsi(hasil){
untuk (masukkan hasil) {
// Dapatkan waktu dan ubah menjadi int
var intKey = parseInt(kunci);
var transferTime = Tanggal baru(intKey);
console.log("transferTime:"+ kunci + "----resut:" + transferTime);
var onePoint = [waktu transfer, hasil[kunci] ];
past_cpu_service_statistics_line.push(onePoint);
}
<span style="color:#ff0000;"> // Tabel status CPU historis
plot= $.jqplot('cpuHistory',[ past_cpu_service_statistics_line],
{
sumbu: {
sumbu x: {
label: 'waktu',
penyaji: $.jqplot.DateAxisRenderer,
opsi centang: {
formatString: '%Y-%#m-%d %H:%M'
},
min : (Waktu saat ini -1000 * 60 * 60),
maks: (Waktu saat ini),
// Nilai minimum yang ditampilkan oleh koordinat horizontal (vertikal).
// centang:['']
},
yaxis: {
label: 'pemantauan cpu',
}
},
penyorot: {
tunjukkan: benar,
ukuranMenyesuaikan: 7.5
},
kursor: {
tampilkan: salah
}
});
</span>
},
kesalahan: fungsi(status teks){
alert("Gagal memperoleh informasi pemantauan!");
}
});
//Dapatkan data cpu historis ajax end
},
kesalahan: fungsi(status teks){
alert("Gagal mendapatkan waktu server saat mengambil data historis cpu!");
}
});
}
fungsi pembaruanCpuPic() {
console.log("Memperbarui tampilan cpu");
//Dapatkan waktu server terlebih dahulu dan gunakan untuk menggambar absis
$.ajax({
ketik: "POSTING",
tipe konten: "aplikasi/x-www-form-urlencoded;charset=UTF-8",
url: globalObj.path + '/server/getServerCurrentTime.htm',
sukses: fungsi(hasil){
var intKey =parseInt(hasil);
var transferTime = Tanggal baru(intKey);
console.log("Dapatkan waktu server:"+hasil+"------"+waktu transfer);
//Bagan operasi
//Jika grafik sudah ada, hancurkan
jika (merencanakan) {
// plot.hancurkan();
$("#cpuHistory").tidak terikat();
$("#cpuHistory").kosong();
petak=batal;
}
//Gambar ulang grafiknya
plot= $.jqplot('cpuHistory',[ past_cpu_service_statistics_line], {
sumbu: {
sumbu x: {
label: 'waktu',
penyaji: $.jqplot.DateAxisRenderer,
opsi centang: {
formatString: '%Y-%#m-%d %H:%M'
},
min: (hasil - 1000*60*60),
maks: (hasil),
// Nilai minimum yang ditampilkan oleh koordinat horizontal (vertikal).
// centang:['']
},
yaxis: {
label: 'pemantauan cpu',
}
},
penyorot: {
tunjukkan: benar,
ukuranMenyesuaikan: 7.5
},
kursor: {
tampilkan: salah
},
memasang ulang: {
resetAxes: benar
}
});
},
kesalahan: fungsi(status teks){
alert("Gagal mendapatkan waktu server!");
}
});
}
fungsi pembaruanCpuInformasi() {
$.ajax({
ketik: "POSTING",
tipe konten: "aplikasi/x-www-form-urlencoded;charset=UTF-8",
url: globalObj.path + '/server/getLatestCpuMonitorData.htm',
data: "hostName=" + "login.cheos.cn",
sukses: fungsi(hasil){
//Perbarui data satu kali
untuk (masukkan hasil) {
var intKey = parseInt(kunci);
var transferTime = Tanggal baru(intKey);
console.log("----------------Perbarui informasi cpu---:" + kunci + "----Waktu pembaruan:" + transferTime);
var onePoint = [waktu transfer, hasil[kunci] ];
past_cpu_service_statistics_line.push(onePoint);
}
//Perbarui bagan
// perbaruiCpuPic();
},
kesalahan: fungsi(status teks){
alert("Gagal memperbarui informasi CPU!");
}
});
}