jqplot通過ajax動態畫折線圖

效果如圖所示,每個五秒鐘圖會移動一次(其實是重新畫瞭一張圖),能顯示所監控的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);
                    }
                    // 歷史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
                                }
                            });
 
                },
                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信息失敗!");
 
        }
    });
 
}

You May Also Like