El efecto es como se muestra en la figura. La imagen se moverá cada cinco segundos (en realidad se dibuja una nueva imagen), lo que puede mostrar la información de la CPU monitoreada.
La función pastCpuInfomation se utiliza principalmente para mostrar un gráfico de líneas.
La función updateCpuPic elimina la imagen de hace 5 segundos y dibuja una nueva imagen basada en los datos existentes.
La función updateCpuInfomation agrega los últimos puntos a la matriz que almacena polilíneas.
Luego configure dos temporizadores en la interfaz y pídales que ejecuten updateCpuPic cada 5 segundos y updateCpuInfomation cada 1 minuto, y las imágenes comenzarán a moverse.
PD: Antes de realizar muchas operaciones en el código, la hora actual del servidor se obtendrá del servidor. La escritura ajax es un poco complicada y no sé si el método de implementación de gráficos dinámicos no está estandarizado. Parece muy bueno. Es mejor actualizar los datos de la línea, ¡espero que mis amigos puedan darme algún consejo! El código para dibujar la tabla se ha marcado en rojo (línea 30 a línea 60)
Copie el código de código de la siguiente manera:
var past_cpu_service_statistics_line = nueva matriz();
gráfico var;
función pasadaCpuInfomation() {
//Datos históricos de la CPU
// hora local
$.ajax({
tipo: "POST",
contentType: "aplicación/x-www-form-urlencoded;charset=UTF-8",
URL: globalObj.path + '/server/getServerCurrentTime.htm',
éxito: función (hora actual) {
console.log("Obtener hora del servidor"+horaactual);
//Obtener datos históricos de la CPU
$.ajax({
tipo: "POST",
contentType: "aplicación/x-www-form-urlencoded;charset=UTF-8",
URL: globalObj.path + '/server/getPastCpuMonitorData.htm',
// startTime endtime son datos ficticios, la hora se obtiene en segundo plano
datos: "hostName=" + "login.cheos.cn",
éxito: función (resultado) {
para (ingrese el resultado) {
//Obtiene la hora y la convierte a int
var intKey = parseInt(clave);
var transferTime = nueva Fecha(intKey);
console.log("transferTime:"+ tecla + "----resut:" + transferTime);
var onePoint = [transferTime, resultado[clave]];
past_cpu_service_statistics_line.push(onePoint);
}
<span style="color:#ff0000;"> // Tabla histórica de estado de la CPU
trama= $.jqplot('cpuHistory',[ past_cpu_service_statistics_line],
{
ejes: {
eje x: {
etiqueta: 'tiempo',
renderizador: $.jqplot.DateAxisRenderer,
opciones de tick: {
cadena de formato: '%Y-%#m-%d %H:%M'
},
min : (hora actual -1000 * 60 * 60),
máx: (hora actual),
// El valor mínimo mostrado por la coordenada horizontal (vertical)
// garrapatas:['']
},
eje y: {
etiqueta: 'monitoreo de CPU',
}
},
resaltador: {
mostrar: verdadero,
TamañoAjuste: 7.5
},
cursor: {
mostrar: falso
}
});
</span>
},
error: función (estado de texto) {
alert("¡Error al obtener información de monitoreo!");
}
});
//Obtener datos históricos de la CPU final ajax
},
error: función (estado de texto) {
alert("¡Error al obtener la hora del servidor al recuperar datos históricos de la CPU!");
}
});
}
función actualizarCpuPic() {
console.log("Actualizando vista de CPU");
//Obtiene primero la hora del servidor y úsala para dibujar la abscisa
$.ajax({
tipo: "POST",
contentType: "aplicación/x-www-form-urlencoded;charset=UTF-8",
URL: globalObj.path + '/server/getServerCurrentTime.htm',
éxito: función (resultado) {
var intKey =parseInt(resultado);
var transferTime = nueva Fecha(intKey);
console.log("Obtener hora del servidor:"+resultado+"------"+transferTime);
//Tabla de operaciones
//Si el gráfico ya existe, destrúyelo
si (trama) {
// trama.destruir();
$("#cpuHistory").unbind();
$("#cpuHistory").empty();
trama = nulo;
}
//Redibujar el gráfico
trama = $.jqplot('cpuHistory',[ past_cpu_service_statistics_line], {
ejes: {
eje x: {
etiqueta: 'tiempo',
renderizador: $.jqplot.DateAxisRenderer,
opciones de tick: {
cadena de formato: '%Y-%#m-%d %H:%M'
},
min: (resultado - 1000 * 60 * 60),
máx: (resultado),
// El valor mínimo mostrado por la coordenada horizontal (vertical)
// garrapatas:['']
},
eje y: {
etiqueta: 'monitoreo de CPU',
}
},
resaltador: {
mostrar: verdadero,
Ajuste de tamaño: 7,5
},
cursor: {
mostrar: falso
},
volver a tramar: {
restablecer ejes: verdadero
}
});
},
error: función (estado de texto) {
alert("¡Error al obtener la hora del servidor!");
}
});
}
función actualizarCpuInfomation() {
$.ajax({
tipo: "POST",
contentType: "aplicación/x-www-form-urlencoded;charset=UTF-8",
URL: globalObj.path + '/server/getLatestCpuMonitorData.htm',
datos: "hostName=" + "login.cheos.cn",
éxito: función (resultado) {
//Actualizar datos una vez
para (ingrese el resultado) {
var intKey = parseInt(clave);
var transferTime = nueva Fecha(intKey);
console.log("----------------Actualizar información de la CPU---:" + tecla + "----Hora de actualización:" + transferTime);
var onePoint = [transferTime, resultado[clave]];
past_cpu_service_statistics_line.push(onePoint);
}
//Actualizar gráfico
// actualizarCpuPic();
},
error: función (estado de texto) {
alert("¡Error al actualizar la información de la CPU!");
}
});
}