効果は図のように5秒ごとに絵が移動し(実際には新しい絵が描画されます)、監視しているCPUの情報を表示することができます。
pastCpuInfomation 関数は主に折れ線グラフを表示するために使用されます。
updateCpuPic 関数は、5 秒前の画像を削除し、既存のデータに基づいて新しい画像を描画します。
updateCpuInfomation 関数は、ポリラインを格納する配列に最新のポイントを追加します。
次に、インターフェースに 2 つのタイマーを設定し、updateCpuPic を 5 秒ごとに、updateCpuInfomation を 1 分ごとに実行するように指示すると、画像が動き始めます。
PS: コード内で多くの操作を実行する前に、サーバーの現在時刻がサーバーから取得されます。ajax の記述は少し面倒で、動的グラフィックスの実装方法が標準化されているかどうかはわかりません。ラインデータを直接更新するのが最善のようです。友達にアドバイスをお願いします。表を描画するコードは赤色でマークされています（30行目から60行目）。
次のようにコードをコピーします。
var past_cpu_service_statistics_line = 新しい Array();
var プロット;
関数 pastCpuInfomation() {
//CPU の履歴データ
// 現地時間
$.ajax({
タイプ:「POST」、
contentType: "application/x-www-form-urlencoded;charset=UTF-8",
URL: globalObj.path + '/server/getServerCurrentTime.htm',
成功: function(currentTime){
console.log("サーバー時刻の取得"+currentTime);
//CPU の履歴データを取得する
$.ajax({
タイプ:「POST」、
contentType: "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 = 新しい日付(intKey);
console.log("transferTime:"+ key + "----resut:" + transferTime);
var onePoint = [転送時間、結果[キー] ];
past_cpu_service_statistics_line.push(onePoint);
}
<span style="color:#ff0000;"> // CPU ステータスの履歴テーブル
プロット= $.jqplot('cpuHistory',[ past_cpu_service_statistics_line],
{
軸: {
xaxis: {
ラベル: '時間'、
レンダラー: $.jqplot.DateAxisRenderer、
ティックオプション: {
フォーマット文字列: '%Y-%#m-%d %H:%M'
}、
分: (現在の時間 -1000 * 60 * 60)、
最大: (現在の時間)、
// 水平（垂直）座標で表示される最小値
// ティック数:['']
}、
ヤクシス: {
ラベル: 'CPU 監視'、
}
}、
ハイライター: {
ショー：本当、
サイズ調整: 7.5
}、
カーソル: {
表示: 偽
}
});
</スパン>
}、
エラー: function(textStatus){
alert("監視情報の取得に失敗しました!");
}
});
//履歴 CPU データを取得する ajax end
}、
エラー: function(textStatus){
alert("CPU 履歴データの取得時にサーバー時刻の取得に失敗しました!");
}
});
}
関数 updateCpuPic() {
console.log("CPU ビューを更新しています");
//最初にサーバー時間を取得し、それを使用して横軸を描画します
$.ajax({
タイプ:「POST」、
contentType: "application/x-www-form-urlencoded;charset=UTF-8",
URL: globalObj.path + '/server/getServerCurrentTime.htm',
成功: 関数(結果){
var intKey =parseInt(結果);
var transferTime = 新しい日付(intKey);
console.log("サーバー時刻の取得:"+結果+"------"+transferTime);
//動作チャート
// チャートがすでに存在する場合は破棄します
if (プロット) {
// プロット.destroy();
$("#cpuHistory").unbind();
$("#cpuHistory").empty();
プロット = null;
}
// チャートを再描画する
プロット= $.jqplot('cpuHistory',[ past_cpu_service_statistics_line], {
軸: {
xaxis: {
ラベル: '時間'、
レンダラー: $.jqplot.DateAxisRenderer、
ティックオプション: {
フォーマット文字列: '%Y-%#m-%d %H:%M'
}、
分: (結果 - 1000 * 60 * 60)、
最大: (結果)、
// 水平（垂直）座標で表示される最小値
// ティック数:['']
}、
ヤクシス: {
ラベル: 'CPU 監視'、
}
}、
ハイライター: {
ショー：本当、
サイズ調整: 7.5
}、
カーソル: {
表示: 偽
}、
リプロット: {
リセット軸: true
}
});
}、
エラー: function(textStatus){
alert("サーバー時刻の取得に失敗しました!");
}
});
}
関数 updateCpuInfomation() {
$.ajax({
タイプ:「POST」、
contentType: "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 = 新しい日付(intKey);
console.log("----------------CPU 情報の更新---:" + key + "----更新時間:" + transferTime);
var onePoint = [転送時間、結果[キー] ];
past_cpu_service_statistics_line.push(onePoint);
}
//チャートを更新
// updateCpuPic();
}、
エラー: function(textStatus){
alert("CPU 情報の更新に失敗しました!");
}
});
}