麻豆小视频在线观看_中文黄色一级片_久久久成人精品_成片免费观看视频大全_午夜精品久久久久久久99热浪潮_成人一区二区三区四区

首頁 > 編程 > JavaScript > 正文

jqplot通過ajax動態畫折線圖的方法及思路

2019-11-20 21:30:28
字體:
來源:轉載
供稿:網友

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

        }
    });

}

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 国产成人精品区 | 中文字幕亚洲情99在线 | 国产精品一区二区x88av | 嗯啊羞羞视频 | 久久2019中文字幕 | 欧美一级一片 | 青青草在线免费观看 | 97porn| 一级黄色a视频 | 色视频在线播放 | 欧美乱论| 草草视频在线播放 | 国产欧美日韩视频在线观看 | 国产色视频在线观看免费 | 一级片久久免费 | 欧美成人一级片 | 91久久国产露脸精品国产护士 | 毛片国产 | h视频在线免费观看 | 美女91视频| 欧美激情精品久久久久 | 99国产精品自拍 | 欧美性色大片 | 色视频一区二区 | 国产亲子伦在线观看 | 一级爱片 | 欧美成人午夜一区二区三区 | v11av在线播放 | 久久综合久久综合久久 | av影院在线播放 | 免费观看9x视频网站在线观看 | 黄色国产在线观看 | 亚洲成人免费电影 | 欧美jizzhd极品欧美 | 水多视频在线观看 | 亚洲成人国产 | 国产免费高清 | 久久久久久久爱 | 成人午夜免费看 | 在线观看免费视频麻豆 | 91久久久久 |