效果如圖所示，每個五秒鐘圖會移動一次（其實是重新畫了一張圖），能顯示所監控的cpu信息。

pastCpuInfomation函數主要用來顯示一張折線圖

updateCpuPic函數把5秒前的圖去掉，重新根據現有數據畫一張圖。

updateCpuInfomation函數 把最新的點加入存儲折線的數組中

再接著在界面中弄兩個定時器，讓他們每個5秒執行一次updateCpuPic，每個1分鐘執行一次updateCpuInfomation，圖畫就動起來了。

PS：代碼中執行好多操作前都會在服務器中獲取下服務器的當前時間 ，ajax寫得有點亂，我也不知道規不規范，實現動態圖的方法好像也不是太好，最好是能直接更新線的數據的，希望朋友們多多指教！畫表的代碼已經標紅（30行到60行）

復制代碼 代碼如下:

var past_cpu_service_statistics_line = new Array();
var plot;
function pastCpuInfomation() {
    // 歷史cpu數據
    // 本地時間

    $.ajax({
        type: "POST",
        contentType: "application/x-www-form-urlencoded;charset=UTF-8",
        url: globalObj.path + '/server/getServerCurrentTime.htm',
        success: function(currentTime){
            console.log("取到服務器時間"+currentTime);
            //獲取歷史cpu數據
            $.ajax({
                type: "POST",
                contentType: "application/x-www-form-urlencoded;charset=UTF-8",
                url: globalObj.path + '/server/getPastCpuMonitorData.htm',
                // startTime endtime 是偽數據，時間在后臺獲取
                data: "hostName=" + "login.cheos.cn",
                success: function(result){

                    for (key in result) {
                        // 去得到時間轉化為int
                        var intKey = parseInt(key);
                        var transferTime = new Date(intKey);
                        console.log("transferTime:"+ key + "----resut:" + transferTime);
                        var onePoint = [transferTime, result[key] ];
                        past_cpu_service_statistics_line.push(onePoint);
                    }
                   <span> // 歷史cpu情況表
                    plot= $.jqplot('cpuHistory',[ past_cpu_service_statistics_line ],
                            {
                                axes: {
                                    xaxis: {
                                        label: '時間',
                                        renderer: $.jqplot.DateAxisRenderer,
                                        tickOptions: {
                                            formatString: '%Y-%#m-%d %H:%M'
                                        },
                                        min : (currentTime -1000 * 60 * 60),
                                        max: (currentTime),

                                    // 橫（縱）坐標顯示的最小值
                                    // ticks:['']

                                    },
                                    yaxis: {
                                        label: 'cpu監控',

                                    }
                                },
                                highlighter: {
                                    show: true,
                                    sizeAdjust : 7.5
                                },
                                cursor: {
                                    show: false
                                }
                            });
 </span>
                },
                error: function(textStatus){
                    alert("獲取監控信息失敗!");
                }
            });
            //獲取歷史cpu數據ajax結束
        },
        error: function(textStatus){
            alert("取歷史cpu數據時候獲取服務器時間失敗!");

        }
    });    

}
function updateCpuPic() {
    console.log("正在更新cpu視圖");
//先取得服務器時間，用來畫橫坐標
    $.ajax({
        type: "POST",
        contentType: "application/x-www-form-urlencoded;charset=UTF-8",
        url: globalObj.path + '/server/getServerCurrentTime.htm',
        success: function(result){
            var intKey =parseInt(result);
            var transferTime = new Date(intKey);
            console.log("獲取到服務器時間："+result+"------"+transferTime);
        //操作圖表
            //如果已經存在圖表，則摧毀
            if (plot) {
                // plot.destory();
                $("#cpuHistory").unbind();
                $("#cpuHistory").empty();
                plot= null;

            }
            //重新畫圖表
            plot= $.jqplot('cpuHistory',[ past_cpu_service_statistics_line ], {
                axes: {
                    xaxis: {
                        label: '時間',
                        renderer: $.jqplot.DateAxisRenderer,
                        tickOptions: {
                            formatString: '%Y-%#m-%d %H:%M'
                        },
                        min: (result - 1000 * 60 * 60),
                        max: (result),

                    // 橫（縱）坐標顯示的最小值
                    // ticks:['']

                    },
                    yaxis: {
                        label: 'cpu監控',

                    }
                },
                highlighter: {
                    show: true,
                    sizeAdjust: 7.5
                },
                cursor: {
                    show: false
                },
                replot: {
                    resetAxes: true
                }
            });

        },
        error: function(textStatus){
            alert("獲取服務器時間失敗!");

        }
    });

 

}

function updateCpuInfomation() {
    $.ajax({
        type: "POST",
        contentType: "application/x-www-form-urlencoded;charset=UTF-8",
        url: globalObj.path + '/server/getLatestCpuMonitorData.htm',
        data: "hostName=" + "login.cheos.cn",
        success: function(result){
            // 更新一次數據
            for (key in result) {
                var intKey = parseInt(key);
                var transferTime = new Date(intKey);
                console.log("----------------更新cpu信息---:" + key + "----更新時間:" + transferTime);
                var onePoint = [transferTime, result[key] ];
                past_cpu_service_statistics_line.push(onePoint);
            }
            // 更新圖表
        //  updateCpuPic();
        },
        error: function(textStatus){
            alert("更新cpu信息失敗!");

        }
    });

}