jqplot通过ajax动态画折线图的方法及思路


Posted in Javascript onDecember 08, 2013

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);
                    }
                   <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信息失败!");
        }
    });
}
Javascript 相关文章推荐
js checkbox(复选框) 使用集锦
Apr 28 Javascript
JQEasy-ui在IE9以下版本中二次加载的问题分析及处理方法
Jun 23 Javascript
js图片轮播效果实现代码
Apr 18 Javascript
JS中call/apply、arguments、undefined/null方法详解
Feb 15 Javascript
原生javascript+css3编写的3D魔方动画旋扭特效
Mar 14 Javascript
JQuery异步加载PartialView的方法
Jun 07 Javascript
js 客户端打印html 并且去掉页眉、页脚的实例
Nov 03 Javascript
JavaScript引用类型之基本包装类型实例分析【Boolean、Number和String】
Aug 09 Javascript
详解离线安装npm包的几种方法
Nov 25 Javascript
15分钟深入了解JS继承分类、原理与用法
Jan 19 Javascript
vue实现购物车小案例
Sep 27 Javascript
vue中利用three.js实现全景图的完整示例
Dec 07 Vue.js
JavaScript 32位整型无符号操作示例
Dec 08 #Javascript
Extjs4中tree的拖拽功能(可以两棵树之间拖拽) 简单实例
Dec 08 #Javascript
js快速排序的实现代码
Dec 08 #Javascript
Javascript中匿名函数的多种调用方式总结
Dec 06 #Javascript
变量声明时命名与变量作为对象属性时命名的区别解析
Dec 06 #Javascript
JavaScript作用域与作用域链深入解析
Dec 06 #Javascript
深入解析JavaScript中的变量作用域
Dec 06 #Javascript
You might like
日本十大最佳动漫,全都是二次元的神级作品
2019/10/05 日漫
用PHP制作静态网站的模板框架(三)
2006/10/09 PHP
php实现单链表的实例代码
2013/03/22 PHP
php cli 小技巧
2013/06/03 PHP
微信公众平台天气预报功能开发
2014/07/06 PHP
Aster vs Newbee BO5 第二场2.19
2021/03/10 DOTA
js之ActiveX控件使用说明 new ActiveXObject()
2014/03/03 Javascript
jquery选择器大全 全面详解jquery选择器
2014/03/06 Javascript
ajax提交表单实现网页无刷新注册示例
2014/05/08 Javascript
原生Javascript封装的一个AJAX函数分享
2014/10/11 Javascript
使用JS+plupload直接批量上传图片到又拍云
2014/12/01 Javascript
jQuery过滤选择器详解
2015/01/13 Javascript
基于jQuery实现表格的排序
2016/12/02 Javascript
JS生成一维码(条形码)功能示例
2017/01/19 Javascript
Vue如何实现组件的源码解析
2017/06/08 Javascript
理解 javascript 中的函数表达式与函数声明
2017/07/07 Javascript
Angular实现响应式表单
2017/08/04 Javascript
详解vue2 $watch要注意的问题
2017/09/08 Javascript
React Native 通告消息竖向轮播组件的封装
2020/08/25 Javascript
使用 Vue 实现一个虚拟列表的方法
2019/08/20 Javascript
[30:00]完美世界DOTA2联赛PWL S2 Rebirth vs LBZS 第二场 11.28
2020/12/01 DOTA
Python验证文件是否可读写代码分享
2017/12/11 Python
python实现日常记账本小程序
2018/03/10 Python
Random 在 Python 中的使用方法
2018/08/09 Python
python 划分数据集为训练集和测试集的方法
2018/12/11 Python
Python 计算任意两向量之间的夹角方法
2019/07/05 Python
python实现简单俄罗斯方块
2020/03/13 Python
用python制作个视频下载器
2021/02/01 Python
实习鉴定范文
2013/12/19 职场文书
仓库组长岗位职责
2014/01/29 职场文书
社保代办委托书怎么写
2014/10/06 职场文书
Python基础知识之变量的详解
2021/04/14 Python
Python中requests做接口测试的方法
2021/05/30 Python
教你用Java Swing实现自助取款机系统
2021/06/11 Java/Android
SQL Server #{}可以防止SQL注入
2022/05/11 SQL Server
Python+DeOldify实现老照片上色功能
2022/06/21 Python