التأثير كما هو موضح في الشكل، ستتحرك الصورة كل خمس ثوانٍ (في الواقع يتم رسم صورة جديدة)، والتي يمكنها عرض معلومات وحدة المعالجة المركزية التي يتم مراقبتها.
يتم استخدام وظيفة PastCpuInfomation بشكل أساسي لعرض مخطط خطي
تقوم وظيفة updateCpuPic بإزالة الصورة التي كانت موجودة قبل 5 ثوانٍ وترسم صورة جديدة بناءً على البيانات الموجودة.
تضيف وظيفة updateCpuInfomation أحدث النقاط إلى المصفوفة التي تخزن الخطوط المتعددة.
ثم قم بإعداد مؤقتين في الواجهة واطلب منهم تنفيذ updateCpuPic كل 5 ثوانٍ وupdateCpuInfomation كل دقيقة، وستبدأ الصور في التحرك.
ملاحظة: قبل إجراء العديد من العمليات في الكود، سيتم الحصول على الوقت الحالي للخادم من الخادم. كتابة ajax فوضوية بعض الشيء، ولا أعرف ما إذا كانت طريقة تنفيذ الرسومات الديناميكية موحدة أم لا يبدو أنه جيد جدًا، فمن الأفضل تحديث بيانات الخط مباشرة، وآمل أن يقدم لي الأصدقاء بعض النصائح! تم وضع علامة على رمز رسم الجدول باللون الأحمر (السطر 30 إلى السطر 60)
انسخ رمز الكود كما يلي:
var Past_cpu_service_statistics_line = new Array();
مؤامرة فار؛
وظيفة الماضيCpuInfomation() {
// بيانات وحدة المعالجة المركزية التاريخية
// التوقيت المحلي
$.اجاكس({
النوع: "منشور"،
نوع المحتوى: "application/x-www-form-urlencoded;charset=UTF-8"،
عنوان URL: globalObj.path + '/server/getServerCurrentTime.htm'،
النجاح: الوظيفة (الوقت الحالي) {
console.log("الحصول على وقت الخادم"+currentTime);
// احصل على بيانات وحدة المعالجة المركزية التاريخية
$.اجاكس({
النوع: "منشور"،
نوع المحتوى: "application/x-www-form-urlencoded;charset=UTF-8"،
عنوان URL: globalObj.path + '/server/getPastCpuMonitorData.htm'،
// وقت نهاية وقت البدء هو بيانات وهمية، ويتم الحصول على الوقت في الخلفية
البيانات: "اسم المضيف =" + "login.cheos.cn"،
النجاح: الوظيفة (النتيجة) {
لـ (مفتاح النتيجة) {
// احصل على الوقت وقم بتحويله إلى int
var intKey = parseInt(key);
فار ترانسفيرتايم = تاريخ جديد(intKey);
console.log("transferTime:"+ key + "----resut:" +transferTime);
var onePoint = [transferTime, result[key] ];
Past_cpu_service_statistics_line.push(onePoint);
}
<span style="color:#ff0000;"> // جدول حالة وحدة المعالجة المركزية التاريخية
مؤامرة= $.jqplot('cpuHistory',[ Past_cpu_service_statistics_line],
{
المحاور: {
المحور السيني: {
التسمية: "الوقت"،
العارض: $.jqplot.DateAxisRenderer،
خيارات القراد: {
سلسلة التنسيق: '%Y-%#m-%d %H:%M'
},
الحد الأدنى : (الوقت الحالي -1000 * 60 * 60)،
الحد الأقصى: (الوقت الحالي)،
// الحد الأدنى للقيمة المعروضة بالإحداثيات الأفقية (الرأسية).
// القراد:['']
},
ياكسيس: {
التسمية: "مراقبة وحدة المعالجة المركزية"،
}
},
تمييز: {
عرض: صحيح،
تعديل الحجم : 7.5
},
المؤشر: {
إظهار: كاذب
}
});
</span>
},
خطأ: الوظيفة (حالة النص) {
تنبيه ("فشل الحصول على معلومات المراقبة!")؛
}
});
// احصل على بيانات وحدة المعالجة المركزية التاريخية ajax end
},
خطأ: الوظيفة (حالة النص) {
تنبيه("فشل في الحصول على وقت الخادم عند جلب بيانات وحدة المعالجة المركزية التاريخية!");
}
});
}
وظيفة التحديثCpuPic() {
console.log("تحديث عرض وحدة المعالجة المركزية");
// احصل على وقت الخادم أولاً واستخدمه لرسم الإحداثي الإحداثي
$.اجاكس({
النوع: "منشور"،
نوع المحتوى: "application/x-www-form-urlencoded;charset=UTF-8"،
عنوان URL: globalObj.path + '/server/getServerCurrentTime.htm'،
النجاح: الوظيفة (النتيجة) {
var intKey =parseInt(result);
فار ترانسفيرتايم = تاريخ جديد(intKey);
console.log("الحصول على وقت الخادم:"+result+"------"+transferTime);
// مخطط التشغيل
// إذا كان المخطط موجودًا بالفعل، فقم بتدميره
إذا (المؤامرة) {
// مؤامرة. تدمير ()؛
$("#cpuHistory").unbind();
$("#cpuHistory").empty();
مؤامرة = فارغة؛
}
// إعادة رسم المخطط
مؤامرة= $.jqplot('cpuHistory',[ Past_cpu_service_statistics_line], {
المحاور: {
المحور السيني: {
التسمية: "الوقت"،
العارض: $.jqplot.DateAxisRenderer،
خيارات القراد: {
سلسلة التنسيق: '%Y-%#m-%d %H:%M'
},
الحد الأدنى: (النتيجة - 1000 * 60 * 60)،
الحد الأقصى: (النتيجة)،
// الحد الأدنى للقيمة المعروضة بالإحداثيات الأفقية (الرأسية).
// القراد:['']
},
ياكسيس: {
التسمية: "مراقبة وحدة المعالجة المركزية"،
}
},
تمييز: {
عرض: صحيح،
تعديل الحجم : 7.5
},
المؤشر: {
إظهار: كاذب
},
إعادة رسم: {
محاور إعادة الضبط: صحيح
}
});
},
خطأ: الوظيفة (حالة النص) {
تنبيه ("فشل الحصول على وقت الخادم!")؛
}
});
}
وظيفة updateCpuInfomation() {
$.اجاكس({
النوع: "منشور"،
نوع المحتوى: "application/x-www-form-urlencoded;charset=UTF-8"،
عنوان URL: globalObj.path + '/server/getLatestCpuMonitorData.htm'،
البيانات: "اسم المضيف =" + "login.cheos.cn"،
النجاح: الوظيفة (النتيجة) {
// تحديث البيانات مرة واحدة
لـ (مفتاح النتيجة) {
var intKey = parseInt(key);
فار ترانسفيرتايم = تاريخ جديد(intKey);
console.log("----------------تحديث معلومات وحدة المعالجة المركزية---:" + key + "----وقت التحديث:" +transferTime);
var onePoint = [transferTime, result[key] ];
Past_cpu_service_statistics_line.push(onePoint);
}
// تحديث الرسم البياني
// updateCpuPic();
},
خطأ: الوظيفة (حالة النص) {
تنبيه ("فشل تحديث معلومات وحدة المعالجة المركزية!")؛
}
});
}