효과는 그림과 같습니다. 그림은 5초마다 이동하여(실제로는 새 그림이 그려짐) 모니터링되는 CPU 정보를 표시할 수 있습니다.
과거CpuInfomation 함수는 주로 꺾은선형 차트를 표시하는 데 사용됩니다.
updateCpuPic 함수는 5초 전의 그림을 제거하고 기존 데이터를 기반으로 새로운 그림을 그립니다.
updateCpuInfomation 함수는 폴리라인을 저장하는 배열에 최신 포인트를 추가합니다.
그런 다음 인터페이스에 두 개의 타이머를 설정하고 5초마다 updateCpuPic을 실행하고 1분마다 updateCpuInfomation을 실행하도록 요청하면 사진이 움직이기 시작합니다.
추신: 코드에서 많은 작업을 수행하기 전에 서버의 현재 시간을 서버에서 가져옵니다. ajax 작성이 약간 지저분하고 동적 그래픽을 구현하는 방법이 표준화되어 있는지 모르겠습니다. 매우 좋은 것 같습니다. 라인 데이터를 직접 업데이트하는 것이 가장 좋습니다. 친구가 조언을 해줄 수 있기를 바랍니다. 테이블을 그리는 코드는 빨간색으로 표시했습니다(30행 ~ 60행).
다음과 같이 코드 코드를 복사합니다.
var 과거_cpu_service_statistics_line = 새로운 배열();
var 플롯;
함수 과거CpuInfomation() {
//과거 CPU 데이터
//현지 시간
$.아약스({
유형: "POST",
콘텐츠 유형: "application/x-www-form-urlencoded;charset=UTF-8",
URL: globalObj.path + '/server/getServerCurrentTime.htm',
성공: 함수(현재시간){
console.log("서버 시간 가져오기"+currentTime);
//과거 CPU 데이터 가져오기
$.아약스({
유형: "POST",
콘텐츠 유형: "application/x-www-form-urlencoded;charset=UTF-8",
URL: globalObj.path + '/server/getPastCpuMonitorData.htm',
// startTime endtime은 더미 데이터이며 시간은 백그라운드에서 가져옵니다.
데이터: "hostName=" + "login.cheos.cn",
성공: 함수(결과){
for (결과 입력) {
// 시간을 구해 int로 변환
var intKey =parseInt(key);
var transferTime = new Date(intKey);
console.log("transferTime:"+ 키 + "----reut:" + transferTime);
var onePoint = [transferTime, 결과[키] ];
과거_cpu_service_statistics_line.push(onePoint);
}
<span style="color:#ff0000;"> // 과거 CPU 상태 테이블
플롯= $.jqplot('cpuHistory',[ 과거_cpu_service_statistics_line],
{
축: {
x축: {
라벨: '시간',
렌더러: $.jqplot.DateAxisRenderer,
틱옵션: {
형식 문자열: '%Y-%#m-%d %H:%M'
},
최소 : (현재 시간 -1000 * 60 * 60),
최대: (현재 시간),
// 가로(세로) 좌표로 표시되는 최소값
// 틱:['']
},
야축: {
라벨: 'CPU 모니터링',
}
},
형광펜: {
쇼: 사실,
크기 조정: 7.5
},
커서: {
보여주기: 거짓
}
});
</span>
},
오류: 함수(텍스트상태){
Alert("모니터링 정보 획득에 실패했습니다!");
}
});
//과거 CPU 데이터 가져오기 ajax end
},
오류: 함수(텍스트상태){
Alert("과거 CPU 데이터를 가져올 때 서버 시간을 가져오지 못했습니다!");
}
});
}
함수 updateCpuPic() {
console.log("CPU 보기 업데이트 중");
//먼저 서버 시간을 구하고 이를 사용하여 가로좌표를 그립니다.
$.아약스({
유형: "POST",
콘텐츠 유형: "application/x-www-form-urlencoded;charset=UTF-8",
URL: globalObj.path + '/server/getServerCurrentTime.htm',
성공: 함수(결과){
var intKey =parseInt(결과);
var transferTime = new Date(intKey);
console.log("서버 시간 가져오기:"+result+"------"+transferTime);
//작업 차트
//차트가 이미 존재한다면 파기한다.
만약 (플롯) {
// 플롯.파괴();
$("#cpuHistory").unbind();
$("#cpuHistory").empty();
플롯=널;
}
//차트를 다시 그립니다.
줄거리= $.jqplot('cpuHistory',[ 과거_cpu_service_statistics_line], {
축: {
x축: {
라벨: '시간',
렌더러: $.jqplot.DateAxisRenderer,
틱옵션: {
형식 문자열: '%Y-%#m-%d %H:%M'
},
최소: (결과 - 1000 * 60 * 60),
최대: (결과),
// 가로(세로) 좌표로 표시되는 최소값
// 틱:['']
},
야축: {
라벨: 'CPU 모니터링',
}
},
형광펜: {
쇼: 사실,
크기 조정: 7.5
},
커서: {
보여주기: 거짓
},
답장: {
ResetAxes: true
}
});
},
오류: 함수(텍스트상태){
Alert("서버 시간을 가져오지 못했습니다!");
}
});
}
함수 updateCpuInfomation() {
$.아약스({
유형: "POST",
콘텐츠 유형: "application/x-www-form-urlencoded;charset=UTF-8",
URL: globalObj.path + '/server/getLatestCpuMonitorData.htm',
데이터: "hostName=" + "login.cheos.cn",
성공: 함수(결과){
//데이터를 한 번 업데이트합니다.
for (결과 입력) {
var intKey =parseInt(key);
var transferTime = new Date(intKey);
console.log("---CPU 정보 업데이트---:" + key + "----업데이트 시간:" + transferTime);
var onePoint = [transferTime, 결과[키] ];
과거_cpu_service_statistics_line.push(onePoint);
}
//차트 업데이트
// 업데이트CpuPic();
},
오류: 함수(텍스트상태){
Alert("CPU 정보 업데이트에 실패했습니다!");
}
});
}