O efeito é mostrado na figura. A imagem se moverá a cada cinco segundos (na verdade, uma nova imagem é desenhada), o que pode exibir as informações da CPU monitoradas.
A função pastCpuInfomation é usada principalmente para exibir um gráfico de linhas
A função updateCpuPic remove a imagem de 5 segundos atrás e desenha uma nova imagem com base nos dados existentes.
A função updateCpuInfomation adiciona os pontos mais recentes ao array que armazena polilinhas.
Em seguida, configure dois temporizadores na interface e peça-lhes para executar updateCpuPic a cada 5 segundos e updateCpuInfomation a cada 1 minuto, e as imagens começarão a se mover.
PS: Antes de realizar muitas operações no código, o horário atual do servidor será obtido do servidor. A escrita do ajax é um pouco confusa e não sei se é padronizado. O método de implementação de gráficos dinâmicos não. parece ser muito bom. É melhor atualizá-los diretamente, espero que os amigos possam me dar alguns conselhos! O código para desenho da tabela foi marcado em vermelho (linha 30 a linha 60)
Copie o código do código da seguinte forma:
var past_cpu_service_statistics_line = new Array();
gráfico var;
função pastCpuInfomation() {
//Dados históricos da CPU
//hora local
$.ajax({
digite: "POSTAR",
contentType: "aplicativo/x-www-form-urlencoded;charset=UTF-8",
url: globalObj.path + '/server/getServerCurrentTime.htm',
sucesso: function(tempoAtual){
console.log("Obter horário do servidor"+currentTime);
//Obter dados históricos da CPU
$.ajax({
digite: "POSTAR",
contentType: "aplicativo/x-www-form-urlencoded;charset=UTF-8",
url: globalObj.path + '/server/getPastCpuMonitorData.htm',
// startTime endtime são dados fictícios, a hora é obtida em segundo plano
dados: "hostName=" + "login.cheos.cn",
sucesso: função(resultado){
for (digite o resultado) {
// Obtém a hora e converte para int
var intKey = parseInt(chave);
var transferTime = new Date(intKey);
console.log("transferTime:"+ chave + "----resut:" + transferTime);
var onePoint = [transferTime, resultado[chave]];
past_cpu_service_statistics_line.push(onePoint);
}
<span style="color:#ff0000;"> // Tabela histórica de status da CPU
plot= $.jqplot('cpuHistory',[ past_cpu_service_statistics_line],
{
eixos: {
eixo x: {
rótulo: 'tempo',
renderizador: $.jqplot.DateAxisRenderer,
tickOptions: {
formatString: '%Y-%#m-%d %H:%M'
},
min: (tempo atual -1000 * 60 * 60),
máx: (tempo atual),
// O valor mínimo exibido pela coordenada horizontal (vertical)
// carrapatos:['']
},
eixo y: {
rótulo: 'monitoramento da CPU',
}
},
marcador: {
mostrar: verdadeiro,
tamanhoAjustar: 7,5
},
cursor: {
mostrar: falso
}
});
</span>
},
erro: função(textStatus){
alert("Falha ao obter informações de monitoramento!");
}
});
//Obter dados históricos da CPU ajax end
},
erro: função(textStatus){
alert("Falha ao obter a hora do servidor ao buscar dados históricos da CPU!");
}
});
}
função atualizaçãoCpuPic() {
console.log("Atualizando visualização da CPU");
//Obtenha primeiro a hora do servidor e use-a para desenhar a abcissa
$.ajax({
digite: "POSTAR",
contentType: "aplicativo/x-www-form-urlencoded;charset=UTF-8",
url: globalObj.path + '/server/getServerCurrentTime.htm',
sucesso: função(resultado){
var intKey =parseInt(resultado);
var transferTime = new Date(intKey);
console.log("Obter horário do servidor:"+resultado+"------"+transferTime);
//Gráfico de operação
//Se o gráfico já existir, destrua-o
if (gráfico) {
// plot.destroy();
$("#cpuHistory").unbind();
$("#cpuHistory").empty();
plot=nulo;
}
//Redesenha o gráfico
plot= $.jqplot('cpuHistory',[ past_cpu_service_statistics_line], {
eixos: {
eixo x: {
rótulo: 'hora',
renderizador: $.jqplot.DateAxisRenderer,
tickOptions: {
formatString: '%Y-%#m-%d %H:%M'
},
min: (resultado - 1000 * 60 * 60),
máximo: (resultado),
// O valor mínimo exibido pela coordenada horizontal (vertical)
// carrapatos:['']
},
eixo y: {
rótulo: 'monitoramento da CPU',
}
},
marcador: {
mostrar: verdadeiro,
tamanhoAjustar: 7,5
},
cursor: {
mostrar: falso
},
replantar: {
resetAxes: verdadeiro
}
});
},
erro: função(textStatus){
alert("Falha ao obter horário do servidor!");
}
});
}
function updateCpuInfomation() {
$.ajax({
digite: "POSTAR",
contentType: "aplicativo/x-www-form-urlencoded;charset=UTF-8",
url: globalObj.path + '/server/getLatestCpuMonitorData.htm',
dados: "hostName=" + "login.cheos.cn",
sucesso: função(resultado){
//Atualiza os dados uma vez
for (digite o resultado) {
var intKey = parseInt(chave);
var transferTime = new Date(intKey);
console.log("----------------Atualizar informações da CPU---:" + key + "----Hora de atualização:" + transferTime);
var onePoint = [transferTime, resultado[chave]];
past_cpu_service_statistics_line.push(onePoint);
}
//Atualiza gráfico
//atualizarCpuPic();
},
erro: função(textStatus){
alert("Falha ao atualizar as informações da CPU!");
}
});
}