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 相关文章推荐
用JavaScript脚本实现Web页面信息交互
Dec 21 Javascript
prototype Element学习笔记(篇二)
Oct 26 Javascript
jquery在IE、FF浏览器的差别详细探讨
Apr 28 Javascript
js猜数字小游戏的简单实现代码
Jul 02 Javascript
jQuery中[attribute]选择器用法实例
Dec 31 Javascript
纯jquery实现模仿淘宝购物车结算
Aug 20 Javascript
jQuery生成假加载动画效果
Dec 01 Javascript
vue父组件通过props如何向子组件传递方法详解
Aug 16 Javascript
详解 vue.js用法和特性
Oct 15 Javascript
JavaScript折半查找(二分查找)算法原理与实现方法示例
Aug 06 Javascript
基于Vue 服务端Cookies删除的问题
Sep 21 Javascript
layui关闭弹窗后刷新主页面和当前更改项的例子
Sep 06 Javascript
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
老版本PHP转义Json里的特殊字符的函数
2015/06/08 PHP
php数组分页实现方法
2016/04/30 PHP
PHP实现一个多功能购物网站的案例
2017/09/13 PHP
基于PHP实现用户登录注册功能的详细教程
2020/08/04 PHP
JS自动适应的图片弹窗实例
2013/06/29 Javascript
node.js实现端口转发
2016/04/14 Javascript
jQuery 出现Cannot read property ‘msie’ of undefined错误的解决方法
2016/11/23 Javascript
Angular 4.x中表单Reactive Forms详解
2017/04/25 Javascript
Angular.js中定时器循环的3种方法总结
2017/04/27 Javascript
基于vue实现swipe分页组件实例
2017/05/25 Javascript
详解Vue.js Mixins 混入使用
2017/09/15 Javascript
vue路由跳转时判断用户是否登录功能的实现
2017/10/26 Javascript
Vue自定义指令实现checkbox全选功能的方法
2018/02/28 Javascript
如何将HTML字符转换为DOM节点并动态添加到文档中详解
2018/08/19 Javascript
JavaScript根据json生成html表格的示例代码
2018/10/24 Javascript
[03:48]显微镜下的DOTA2第四期——TP动作
2014/06/20 DOTA
[02:21]2018完美盛典章节片——初心
2018/12/17 DOTA
[52:40]完美世界DOTA2联赛PWL S2 Magma vs GXR 第一场 11.29
2020/12/02 DOTA
Python中使用asyncio 封装文件读写
2016/09/11 Python
Python中input与raw_input 之间的比较
2017/08/20 Python
Python中序列的修改、散列与切片详解
2017/08/27 Python
Python数据可视化正态分布简单分析及实现代码
2017/12/04 Python
python如何派生内置不可变类型并修改实例化行为
2018/03/21 Python
python Pandas 读取txt表格的实例
2018/04/29 Python
python全栈知识点总结
2019/07/01 Python
Python垃圾回收机制三种实现方法
2020/04/27 Python
Python命名空间namespace及作用域原理解析
2020/06/05 Python
护理学中专毕业生求职信
2013/11/11 职场文书
经济学博士求职自荐信范文
2013/11/23 职场文书
社区志愿者培训方案
2014/06/10 职场文书
售后客服工作职责
2014/06/16 职场文书
银行反四风对照检查材料
2014/09/29 职场文书
二年级语文上册复习计划
2015/01/19 职场文书
碧霞祠导游词
2015/02/09 职场文书
Python虚拟环境virtualenv是如何使用的
2021/06/20 Python
vmware虚拟机打不开vmx文件怎么办 ?vmware虚拟机vmx文件打开方法
2022/04/08 数码科技