L'effet est comme indiqué sur la figure. L'image se déplacera toutes les cinq secondes (en fait, une nouvelle image est dessinée), ce qui peut afficher les informations du processeur surveillées.
La fonction pastCpuInfomation est principalement utilisée pour afficher un graphique linéaire
La fonction updateCpuPic supprime l'image d'il y a 5 secondes et dessine une nouvelle image basée sur les données existantes.
La fonction updateCpuInfomation ajoute les derniers points au tableau stockant les polylignes.
Ensuite, configurez deux minuteries dans l'interface et demandez-leur d'exécuter updateCpuPic toutes les 5 secondes et updateCpuInfomation toutes les 1 minute, et les images commenceront à bouger.
PS : Avant d'effectuer de nombreuses opérations dans le code, l'heure actuelle du serveur sera obtenue du serveur. L'écriture ajax est un peu brouillonne, et je ne sais pas si elle est standardisée. Cela semble très bien. Il est préférable de mettre à jour les données de la ligne directement, j'espère que des amis pourront me donner des conseils ! Le code pour dessiner le tableau a été marqué en rouge (ligne 30 à ligne 60)
Copiez le code comme suit :
var past_cpu_service_statistics_line = new Array();
var complot;
fonction pastCpuInfomation() {
//Données historiques du processeur
// heure locale
$.ajax({
tapez : "POST",
contentType : "application/x-www-form-urlencoded;charset=UTF-8",
URL : globalObj.path + '/server/getServerCurrentTime.htm',
succès : fonction (heure actuelle) {
console.log("Obtenir l'heure du serveur"+currentTime);
//Obtenir les données historiques du processeur
$.ajax({
tapez : "POST",
contentType : "application/x-www-form-urlencoded;charset=UTF-8",
URL : globalObj.path + '/server/getPastCpuMonitorData.htm',
// startTime endtime est une donnée factice, l'heure est obtenue en arrière-plan
données : "hostName=" + "login.cheos.cn",
succès : fonction (résultat) {
pour (saisir le résultat) {
// Récupère l'heure et la convertit en entier
var intKey = parseInt(clé);
var transferTime = new Date(intKey);
console.log("transferTime:"+ key + "----resut:" + transferTime);
var onePoint = [transferTime, result[key] ];
past_cpu_service_statistics_line.push(onePoint);
}
<span style="color:#ff0000;"> // Tableau d'état historique du processeur
plot= $.jqplot('cpuHistory',[ past_cpu_service_statistics_line],
{
axes : {
axe x : {
étiquette : 'temps',
moteur de rendu : $.jqplot.DateAxisRenderer,
tickOptions : {
formatString : '%Y-%#m-%d %H:%M'
},
min : (heure actuelle -1000 * 60 * 60),
max : (heure actuelle),
// La valeur minimale affichée par la coordonnée horizontale (verticale)
// coche :['']
},
axe y : {
étiquette : 'surveillance du processeur',
}
},
surligneur : {
montrer : vrai,
tailleAjuster : 7,5
},
curseur : {
montrer : faux
}
});
</span>
},
erreur : fonction (textStatus) {
alert("Échec de l'obtention des informations de surveillance !");
}
});
//Obtenir la fin ajax des données historiques du processeur
},
erreur : fonction (textStatus) {
alert("Échec de l'obtention de l'heure du serveur lors de la récupération des données historiques du processeur !");
}
});
}
fonction updateCpuPic() {
console.log("Mise à jour de la vue CPU");
//Obtenez d'abord l'heure du serveur et utilisez-la pour tracer l'abscisse
$.ajax({
tapez : "POST",
contentType : "application/x-www-form-urlencoded;charset=UTF-8",
URL : globalObj.path + '/server/getServerCurrentTime.htm',
succès : fonction (résultat) {
var intKey =parseInt(résultat);
var transferTime = new Date(intKey);
console.log("Obtenir l'heure du serveur :"+result+"------"+transferTime);
//Tableau des opérations
//Si le graphique existe déjà, détruisez-le
si (intrigue) {
// plot.destroy();
$("#cpuHistory").unbind();
$("#cpuHistory").empty();
tracé = nul ;
}
//Redessine le graphique
plot= $.jqplot('cpuHistory',[ past_cpu_service_statistics_line], {
axes : {
axe x : {
étiquette : 'temps',
moteur de rendu : $.jqplot.DateAxisRenderer,
tickOptions : {
formatString : '%Y-%#m-%d %H:%M'
},
min : (résultat - 1000 * 60 * 60),
max : (résultat),
// La valeur minimale affichée par la coordonnée horizontale (verticale)
// coche :['']
},
axe y : {
étiquette : 'surveillance du processeur',
}
},
surligneur : {
montrer : vrai,
tailleAjuster : 7,5
},
curseur : {
montrer : faux
},
retracer : {
réinitialiserAxes : vrai
}
});
},
erreur : fonction (textStatus) {
alert("Échec de l'obtention de l'heure du serveur !");
}
});
}
fonction updateCpuInfomation() {
$.ajax({
tapez : "POST",
contentType : "application/x-www-form-urlencoded;charset=UTF-8",
URL : globalObj.path + '/server/getLatestCpuMonitorData.htm',
données : "hostName=" + "login.cheos.cn",
succès : fonction (résultat) {
// Mettre à jour les données une fois
pour (saisir le résultat) {
var intKey = parseInt(clé);
var transferTime = new Date(intKey);
console.log("----------------Mettre à jour les informations sur le processeur---:" + key + "----Heure de mise à jour :" + transferTime);
var onePoint = [transferTime, result[key] ];
past_cpu_service_statistics_line.push(onePoint);
}
//Mettre à jour le graphique
// updateCpuPic();
},
erreur : fonction (textStatus) {
alert("Échec de la mise à jour des informations sur le processeur !");
}
});
}