เอฟเฟกต์ดังแสดงในรูป รูปภาพจะเคลื่อนไหวทุกๆ 5 วินาที (จริงๆ แล้วเป็นรูปภาพใหม่ที่ถูกวาดขึ้น) ซึ่งสามารถแสดงข้อมูล CPU ที่ถูกตรวจสอบได้
ฟังก์ชัน PastCpuInfomation ส่วนใหญ่จะใช้ในการแสดงแผนภูมิเส้น
ฟังก์ชัน updateCpuPic จะลบรูปภาพจาก 5 วินาทีที่แล้ว และวาดภาพใหม่ตามข้อมูลที่มีอยู่
ฟังก์ชัน updateCpuInfomation จะเพิ่มจุดล่าสุดให้กับอาร์เรย์ที่จัดเก็บเส้นหลายเส้น
จากนั้นตั้งค่าตัวจับเวลาสองตัวในอินเทอร์เฟซและขอให้ดำเนินการ updateCpuPic ทุกๆ 5 วินาทีและ updateCpuInfomation ทุกๆ 1 นาที จากนั้นรูปภาพจะเริ่มเคลื่อนไหว
PS: ก่อนที่จะดำเนินการหลายอย่างในโค้ด เวลาปัจจุบันของเซิร์ฟเวอร์จะได้รับจากเซิร์ฟเวอร์ การเขียน ajax นั้นยุ่งเล็กน้อย และฉันไม่รู้ว่ามันเป็นมาตรฐานหรือไม่ ดูจะดีมากเลย อัพเดทข้อมูลทาง Line โดยตรงดีที่สุด หวังว่าเพื่อนๆ จะได้ให้คำแนะนำบ้างนะครับ! รหัสการวาดตารางถูกทำเครื่องหมายด้วยสีแดง (บรรทัดที่ 30 ถึงบรรทัดที่ 60)
คัดลอกรหัสรหัสดังต่อไปนี้:
var past_cpu_service_statistics_line = อาร์เรย์ใหม่ ();
พล็อต var;
ฟังก์ชั่น PastCpuInfomation() {
// ข้อมูลซีพียูในอดีต
// เวลาท้องถิ่น
$.ajax({
ประเภท: "โพสต์",
contentType: "application/x-www-form-urlencoded;charset=UTF-8",
URL: globalObj.path + '/server/getServerCurrentTime.htm',
สำเร็จ: ฟังก์ชั่น (เวลาปัจจุบัน) {
console.log("รับเวลาเซิร์ฟเวอร์"+currentTime);
// รับข้อมูลประวัติ cpu
$.ajax({
ประเภท: "โพสต์",
contentType: "application/x-www-form-urlencoded;charset=UTF-8",
URL: globalObj.path + '/server/getPastCpuMonitorData.htm',
// startTime เวลาสิ้นสุดเป็นข้อมูลจำลอง โดยเวลาจะได้รับในเบื้องหลัง
ข้อมูล: "hostName=" + "login.cheos.cn",
สำเร็จ: ฟังก์ชั่น (ผลลัพธ์) {
สำหรับ (ป้อนผลลัพธ์) {
// หาเวลาแล้วแปลงเป็น int
var intKey = parseInt(คีย์);
var TransferTime = วันที่ใหม่ (intKey);
console.log("transferTime:"+ key + "----resut:" + TransferTime);
var onePoint = [transferTime, ผลลัพธ์ [คีย์] ];
past_cpu_service_statistics_line.push (onePoint);
-
<span style="color:#ff0000;"> // ตารางสถานะ CPU ในอดีต
plot= $.jqplot('cpuHistory',[ past_cpu_service_statistics_line],
-
แกน: {
แกน: {
ป้ายกำกับ: 'เวลา',
ตัวแสดงผล: $.jqplot.DateAxisRenderer,
ติ๊กตัวเลือก: {
formatString: '%Y-%#m-%d %H:%M'
-
นาที : (เวลาปัจจุบัน -1,000 * 60 * 60)
สูงสุด: (เวลาปัจจุบัน)
// ค่าต่ำสุดที่แสดงโดยพิกัดแนวนอน (แนวตั้ง)
// ติ๊ก:['']
-
แกน: {
ป้ายกำกับ: 'การตรวจสอบซีพียู',
-
-
ปากกาเน้นข้อความ: {
แสดง: จริง,
ปรับขนาด: 7.5
-
เคอร์เซอร์: {
แสดง: เท็จ
-
-
</span>
-
ข้อผิดพลาด: ฟังก์ชั่น (textStatus) {
alert("ไม่สามารถรับข้อมูลการตรวจสอบได้!");
-
-
// รับข้อมูลประวัติ cpu สิ้นสุด ajax
-
ข้อผิดพลาด: ฟังก์ชั่น (textStatus) {
alert("ไม่สามารถรับเวลาเซิร์ฟเวอร์เมื่อดึงข้อมูลประวัติ cpu!");
-
-
-
ฟังก์ชั่น updateCpuPic() {
console.log("กำลังอัพเดตมุมมองซีพียู");
//รับเวลาเซิร์ฟเวอร์ก่อนแล้วใช้เพื่อวาด Abscissa
$.ajax({
ประเภท: "โพสต์",
contentType: "application/x-www-form-urlencoded;charset=UTF-8",
URL: globalObj.path + '/server/getServerCurrentTime.htm',
สำเร็จ: ฟังก์ชั่น (ผลลัพธ์) {
var intKey =parseInt(ผลลัพธ์);
var TransferTime = วันที่ใหม่ (intKey);
console.log("รับเวลาเซิร์ฟเวอร์:"+ผลลัพธ์+"------"+transferTime);
//แผนภูมิการทำงาน
//หากแผนภูมิมีอยู่แล้ว ให้ทำลายทิ้ง
ถ้า (พล็อต) {
// plot.destroy();
$("#cpuHistory").ยกเลิกการผูก();
$("#cpuHistory").empty();
โครงเรื่อง=null;
-
//วาดแผนภูมิใหม่
plot= $.jqplot('cpuHistory',[ Past_cpu_service_statistics_line], {
แกน: {
แกน: {
ป้ายกำกับ: 'เวลา',
ตัวแสดงผล: $.jqplot.DateAxisRenderer,
ติ๊กตัวเลือก: {
formatString: '%Y-%#m-%d %H:%M'
-
นาที: (ผลลัพธ์ - 1,000 * 60 * 60)
สูงสุด: (ผลลัพธ์)
// ค่าต่ำสุดที่แสดงโดยพิกัดแนวนอน (แนวตั้ง)
// ติ๊ก:['']
-
แกน: {
ป้ายกำกับ: 'การตรวจสอบซีพียู',
-
-
ปากกาเน้นข้อความ: {
แสดง: จริง,
ปรับขนาด: 7.5
-
เคอร์เซอร์: {
แสดง: เท็จ
-
จำลองสถานการณ์: {
รีเซ็ต Axes: จริง
-
-
-
ข้อผิดพลาด: ฟังก์ชั่น (textStatus) {
alert("ไม่สามารถรับเวลาเซิร์ฟเวอร์!");
-
-
-
ฟังก์ชั่น updateCpuInfomation() {
$.ajax({
ประเภท: "โพสต์",
contentType: "application/x-www-form-urlencoded;charset=UTF-8",
URL: globalObj.path + '/server/getLatestCpuMonitorData.htm',
ข้อมูล: "hostName=" + "login.cheos.cn",
สำเร็จ: ฟังก์ชั่น (ผลลัพธ์) {
//อัพเดตข้อมูลหนึ่งครั้ง
สำหรับ (ป้อนผลลัพธ์) {
var intKey = parseInt(คีย์);
var TransferTime = วันที่ใหม่ (intKey);
console.log ("---------------- อัปเดตข้อมูล cpu ---:" + คีย์ + "---- เวลาอัปเดต:" + TransferTime);
var onePoint = [transferTime, ผลลัพธ์ [คีย์] ];
past_cpu_service_statistics_line.push (onePoint);
-
//อัพเดตกราฟ
// อัพเดต CPUPic();
-
ข้อผิดพลาด: ฟังก์ชั่น (textStatus) {
alert("ไม่สามารถอัพเดตข้อมูล cpu ได้!");
-
-
-