Der Effekt ist wie in der Abbildung dargestellt. Das Bild wird alle fünf Sekunden verschoben (tatsächlich wird ein neues Bild gezeichnet), wodurch die überwachten CPU-Informationen angezeigt werden können.
Die pastCpuInfomation-Funktion wird hauptsächlich zur Anzeige eines Liniendiagramms verwendet
Die updateCpuPic-Funktion entfernt das Bild von vor 5 Sekunden und zeichnet ein neues Bild basierend auf den vorhandenen Daten.
Die updateCpuInfomation-Funktion fügt die neuesten Punkte zum Array hinzu, in dem Polylinien gespeichert sind.
Richten Sie dann zwei Timer in der Schnittstelle ein und bitten Sie sie, updateCpuPic alle 5 Sekunden und updateCpuInfomation alle 1 Minute auszuführen, und die Bilder beginnen sich zu bewegen.
PS: Bevor viele Operationen im Code ausgeführt werden, wird die aktuelle Zeit des Servers vom Server abgerufen. Das Ajax-Schreiben ist etwas chaotisch, und ich weiß nicht, ob die Methode zur Implementierung dynamischer Grafiken nicht standardisiert ist Scheint sehr gut zu sein, es ist am besten, die Leitungsdaten direkt zu aktualisieren. Ich hoffe, Freunde können mir einen Rat geben! Der Code zum Zeichnen der Tabelle wurde rot markiert (Zeile 30 bis Zeile 60).
Kopieren Sie den Codecode wie folgt:
var past_cpu_service_statistics_line = new Array();
Var-Plot;
Funktion pastCpuInfomation() {
//Historische CPU-Daten
// Ortszeit
$.ajax({
Typ: „POST“,
contentType: „application/x-www-form-urlencoded;charset=UTF-8“,
URL: globalObj.path + '/server/getServerCurrentTime.htm',
Erfolg: function(currentTime){
console.log("Serverzeit abrufen"+currentTime);
//Historische CPU-Daten abrufen
$.ajax({
Typ: „POST“,
contentType: „application/x-www-form-urlencoded;charset=UTF-8“,
URL: globalObj.path + '/server/getPastCpuMonitorData.htm',
// startTime endtime sind Dummy-Daten, die Zeit wird im Hintergrund ermittelt
Daten: „hostName=" + „login.cheos.cn",
Erfolg: Funktion(Ergebnis){
for (Ergebnis eingeben) {
// Holen Sie sich die Zeit und konvertieren Sie sie in int
var intKey = parseInt(key);
var transferTime = neues Datum(intKey);
console.log("transferTime:"+ key + "----resut:" + transferTime);
var onePoint = [transferTime, result[key] ];
past_cpu_service_statistics_line.push(onePoint);
}
<span style="color:#ff0000;"> // Historische CPU-Statustabelle
plot= $.jqplot('cpuHistory',[ past_cpu_service_statistics_line],
{
Achsen: {
xaxis: {
Etikett: 'Zeit',
Renderer: $.jqplot.DateAxisRenderer,
tickOptions: {
formatString: '%Y-%#m-%d %H:%M'
},
min: (aktuelleZeit -1000 * 60 * 60),
max: (aktuelleZeit),
// Der minimale Wert, der von der horizontalen (vertikalen) Koordinate angezeigt wird
// tickt:['']
},
Y-Achse: {
Label: 'CPU-Überwachung',
}
},
Textmarker: {
zeigen: wahr,
sizeAdjust: 7,5
},
Cursor: {
zeigen: falsch
}
});
</span>
},
Fehler: function(textStatus){
alarm("Überwachungsinformationen konnten nicht abgerufen werden!");
}
});
//Historische CPU-Daten abrufen Ajax-Ende
},
Fehler: function(textStatus){
alarm("Beim Abrufen historischer CPU-Daten konnte die Serverzeit nicht abgerufen werden!");
}
});
}
Funktion updateCpuPic() {
console.log("CPU-Ansicht wird aktualisiert");
//Erhalte zuerst die Serverzeit und verwende sie zum Zeichnen der Abszisse
$.ajax({
Typ: „POST“,
contentType: „application/x-www-form-urlencoded;charset=UTF-8“,
URL: globalObj.path + '/server/getServerCurrentTime.htm',
Erfolg: Funktion(Ergebnis){
var intKey =parseInt(result);
var transferTime = neues Datum(intKey);
console.log("Serverzeit abrufen:"+result+"------"+transferTime);
//Operationsdiagramm
//Wenn das Diagramm bereits existiert, zerstören Sie es
if (plot) {
// plot.destroy();
$("#cpuHistory").unbind();
$("#cpuHistory").empty();
plot=null;
}
//Zeichne das Diagramm neu
plot= $.jqplot('cpuHistory',[ past_cpu_service_statistics_line], {
Achsen: {
xaxis: {
Etikett: 'Zeit',
Renderer: $.jqplot.DateAxisRenderer,
tickOptions: {
formatString: '%Y-%#m-%d %H:%M'
},
min: (Ergebnis - 1000 * 60 * 60),
max: (Ergebnis),
// Der durch die horizontale (vertikale) Koordinate angezeigte Mindestwert
// tickt:['']
},
Y-Achse: {
Label: 'CPU-Überwachung',
}
},
Textmarker: {
zeigen: wahr,
sizeAdjust: 7,5
},
Cursor: {
zeigen: falsch
},
erneut zeichnen: {
resetAxes: true
}
});
},
Fehler: function(textStatus){
alarm("Serverzeit konnte nicht abgerufen werden!");
}
});
}
Funktion updateCpuInfomation() {
$.ajax({
Typ: „POST“,
contentType: „application/x-www-form-urlencoded;charset=UTF-8“,
URL: globalObj.path + '/server/getLatestCpuMonitorData.htm',
Daten: „hostName=" + „login.cheos.cn",
Erfolg: Funktion(Ergebnis){
//Daten einmal aktualisieren
for (Ergebnis eingeben) {
var intKey = parseInt(key);
var transferTime = neues Datum(intKey);
console.log("----------------CPU-Informationen aktualisieren---:" + Taste + "----Aktualisierungszeit:" + transferTime);
var onePoint = [transferTime, result[key] ];
past_cpu_service_statistics_line.push(onePoint);
}
//Diagramm aktualisieren
// updateCpuPic();
},
Fehler: function(textStatus){
alarm("CPU-Informationen konnten nicht aktualisiert werden!");
}
});
}