Эффект такой, как показано на рисунке: изображение будет перемещаться каждые пять секунд (фактически рисуется новое изображение), что может отображать отслеживаемую информацию о процессоре.
Функция PastCpuInfomation в основном используется для отображения линейного графика.
Функция updateCpuPic удаляет картинку 5-секундной давности и рисует новую картинку на основе существующих данных.
Функция updateCpuInfomation добавляет последние точки в массив, хранящий полилинии.
Затем установите в интерфейсе два таймера и попросите их выполнять updateCpuPic каждые 5 секунд и updateCpuInfomation каждые 1 минуту, и картинки начнут двигаться.
PS: Перед выполнением многих операций в коде с сервера будет получено текущее время. Написание ajax немного беспорядочное, и я не знаю, стандартизирован ли он. Метод реализации динамической графики. Кажется, это очень хорошо. Лучше всего обновить данные напрямую, надеюсь, друзья дадут мне совет! Код для рисования таблицы выделен красным цветом (строки 30–60).
Скопируйте код кода следующим образом:
вар Past_cpu_service_statistics_line = новый массив ();
вар сюжет;
функция PastCpuInfomation() {
//Исторические данные процессора
// местное время
$.ajax({
тип: «ПОСТ»,
contentType: "application/x-www-form-urlencoded;charset=UTF-8",
URL: globalObj.path + '/server/getServerCurrentTime.htm',
успех: функция (currentTime) {
console.log("Получить время сервера"+currentTime);
//Получаем исторические данные о процессоре
$.ajax({
тип: «ПОСТ»,
contentType: "application/x-www-form-urlencoded;charset=UTF-8",
URL: globalObj.path + '/server/getPastCpuMonitorData.htm',
// startTime endtime — фиктивные данные, время получается в фоновом режиме
данные: "hostName=" + "login.cheos.cn",
успех: функция(результат){
for (ключ в результате) {
// Получаем время и конвертируем его в int
вар intKey = parseInt (ключ);
вар TransferTime = новая дата (intKey);
console.log("transferTime:"+ key + "----resut:" + TransferTime);
вар onePoint = [transferTime, результат [ключ]];
Past_cpu_service_statistics_line.push(onePoint);
}
<span style="color:#ff0000;"> // Таблица исторического состояния процессора
сюжет = $.jqplot('cpuHistory',[ Past_cpu_service_statistics_line],
{
оси: {
ось x: {
метка: «время»,
средство рендеринга: $.jqplot.DateAxisRenderer,
тикОпции: {
formatString: '%Y-%#m-%d %H:%M'
},
мин: (текущеевремя -1000 * 60 * 60),
Макс: (текущеевремя),
// Минимальное значение, отображаемое по горизонтальной (вертикальной) координате
// тики:['']
},
yaxis: {
метка: «мониторинг процессора»,
}
},
маркер: {
показать: правда,
регулировка размера: 7,5
},
курсор: {
показать: ложь
}
});
</span>
},
ошибка: функция (textStatus) {
alert("Не удалось получить информацию мониторинга!");
}
});
//Получаем исторические данные процессора ajax end
},
ошибка: функция (textStatus) {
alert("Не удалось получить время сервера при получении исторических данных о процессоре!");
}
});
}
функция updateCpuPic() {
console.log("Обновление представления процессора");
//Сначала получаем время сервера и используем его для рисования абсциссы
$.ajax({
тип: «ПОСТ»,
contentType: "application/x-www-form-urlencoded;charset=UTF-8",
URL: globalObj.path + '/server/getServerCurrentTime.htm',
успех: функция(результат){
вар intKey =parseInt (результат);
вар TransferTime = новая дата (intKey);
console.log("Получить время сервера:"+result+"------"+transferTime);
//Диаграмма работы
//Если график уже существует, уничтожьте его
если (график) {
// сюжет.уничтожить();
$("#cpuHistory").unbind();
$("#cpuHistory").empty();
сюжет = ноль;
}
//Перерисовываем график
plot= $.jqplot('cpuHistory',[ Past_cpu_service_statistics_line], {
оси: {
ось x: {
метка: «время»,
средство рендеринга: $.jqplot.DateAxisRenderer,
тикОпции: {
formatString: '%Y-%#m-%d %H:%M'
},
мин: (результат — 1000*60*60),
Макс: (результат),
// Минимальное значение, отображаемое по горизонтальной (вертикальной) координате
// тики:['']
},
ось: {
метка: «мониторинг процессора»,
}
},
маркер: {
показать: правда,
регулировка размера: 7,5
},
курсор: {
показать: ложь
},
перестроить: {
сбросАксес: правда
}
});
},
ошибка: функция (textStatus) {
alert("Не удалось получить время сервера!");
}
});
}
функция updateCpuInfomation() {
$.ajax({
тип: «ПОСТ»,
contentType: "application/x-www-form-urlencoded;charset=UTF-8",
URL: globalObj.path + '/server/getLatestCpuMonitorData.htm',
данные: "hostName=" + "login.cheos.cn",
успех: функция(результат){
//Обновляем данные один раз
for (ключ в результате) {
вар intKey = parseInt (ключ);
вар TransferTime = новая дата (intKey);
console.log("----------------Обновить информацию о процессоре ---:" + key + "----Время обновления:" + TransferTime);
вар onePoint = [transferTime, результат [ключ]];
Past_cpu_service_statistics_line.push(onePoint);
}
//Обновляем график
// updateCpuPic();
},
ошибка: функция (textStatus) {
alert("Не удалось обновить информацию о процессоре!");
}
});
}