jqplot通過ajax動態(tài)畫折線圖的方法及思路

更新時(shí)間：2013年12月08日 17:20:50 作者：

這篇文章主要介紹了

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

pastCpuInfomation函數(shù)主要用來顯示一張折線圖

updateCpuPic函數(shù)把5秒前的圖去掉，重新根據(jù)現(xiàn)有數(shù)據(jù)畫一張圖。

updateCpuInfomation函數(shù) 把最新的點(diǎn)加入存儲折線的數(shù)組中

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

PS：代碼中執(zhí)行好多操作前都會在服務(wù)器中獲取下服務(wù)器的當(dāng)前時(shí)間，ajax寫得有點(diǎn)亂，我也不知道規(guī)不規(guī)范，實(shí)現(xiàn)動態(tài)圖的方法好像也不是太好，最好是能直接更新線的數(shù)據(jù)的，希望朋友們多多指教！畫表的代碼已經(jīng)標(biāo)紅（30行到60行）

復(fù)制代碼代碼如下:

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

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

                    for (key in result) {
                        // 去得到時(shí)間轉(zhuǎn)化為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 style="color:#ff0000;"> // 歷史cpu情況表
                    plot= $.jqplot('cpuHistory',[ past_cpu_service_statistics_line ],
                            {
                                axes: {
                                    xaxis: {
                                        label: '時(shí)間',
                                        renderer: $.jqplot.DateAxisRenderer,
                                        tickOptions: {
                                            formatString: '%Y-%#m-%d %H:%M'
                                        },
                                        min : (currentTime -1000 * 60 * 60),
                                        max: (currentTime),

                                    // 橫（縱）坐標(biāo)顯示的最小值
                                    // ticks:['']

                                    },
                                    yaxis: {
                                        label: 'cpu監(jiān)控',

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

        }
    });     

}
function updateCpuPic() {
    console.log("正在更新cpu視圖");
//先取得服務(wù)器時(shí)間，用來畫橫坐標(biāo)
    $.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("獲取到服務(wù)器時(shí)間："+result+"------"+transferTime);
        //操作圖表
            //如果已經(jīng)存在圖表，則摧毀
            if (plot) {
                // plot.destory();
                $("#cpuHistory").unbind();
                $("#cpuHistory").empty();
                plot= null;

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

                    // 橫（縱）坐標(biāo)顯示的最小值
                    // ticks:['']

                    },
                    yaxis: {
                        label: 'cpu監(jiān)控',

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

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

        }
    });

 

}

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){
            // 更新一次數(shù)據(jù)
            for (key in result) {
                var intKey = parseInt(key);
                var transferTime = new Date(intKey);
                console.log("----------------更新cpu信息---:" + key + "----更新時(shí)間:" + transferTime);
                var onePoint = [transferTime, result[key] ];
                past_cpu_service_statistics_line.push(onePoint);
            }
            // 更新圖表
        //  updateCpuPic();
        },
        error: function(textStatus){
            alert("更新cpu信息失敗!");

        }
    });

}