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.The.Good.Parts阅读笔记(一)假值与===运算符
Nov 16 Javascript
jQuery 插件仿百度搜索框智能提示(带Value值)
Jan 22 Javascript
设为首页和收藏的Javascript代码(亲测兼容IE,Firefox,chrome等浏览器)
Nov 18 Javascript
jQuery异步验证用户名是否存在示例代码
May 21 Javascript
js匿名函数作为函数参数详解
Jun 01 Javascript
只要1K 纯JS脚本送你一朵3D红色玫瑰
Aug 09 Javascript
JS闭包与延迟求值用法示例
Dec 22 Javascript
AngularJS之ionic 框架下实现 Localstorage本地存储
Apr 22 Javascript
vue.js中mint-ui框架的使用方法
May 12 Javascript
页面内锚点定位及跳转方法总结(推荐)
Apr 24 Javascript
一篇文章介绍redux、react-redux、redux-saga总结
May 23 Javascript
vue实现购物车列表
Jun 30 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
substr()函数中文版
2006/10/09 PHP
php 从数据库提取二进制图片的处理代码
2009/09/09 PHP
解析在zend Farmework下如何创立一个FORM表单
2013/06/28 PHP
destoon整合ucenter后注册页面不跳转的解决方法
2014/06/21 PHP
PHP里8个鲜为人知的安全函数分析
2014/12/09 PHP
php解析字符串里所有URL地址的方法
2015/04/03 PHP
简介PHP的Yii框架中缓存的一些高级用法
2016/03/29 PHP
laravel学习教程之关联模型
2016/07/30 PHP
jQuery EasyUI 中文API Button使用实例
2010/04/14 Javascript
JavaScript之Getters和Setters 平台支持等详细介绍
2012/12/07 Javascript
js判断IE浏览器版本过低示例代码
2013/11/22 Javascript
jQuery ajax分页插件实例代码
2016/01/27 Javascript
javascript cookie基础应用之记录用户名的方法
2016/09/20 Javascript
JS点击某个图标或按钮弹出文件选择框的实现代码
2016/09/27 Javascript
vue router的基本使用和配置教程
2018/11/05 Javascript
如何写好一个vue组件,老夫的一年经验全在这了(推荐)
2019/05/18 Javascript
angular使用md5,CryptoJS des加密的方法
2019/06/03 Javascript
python实现比较两段文本不同之处的方法
2015/05/30 Python
详解python进行mp3格式判断
2016/12/23 Python
python+VTK环境搭建及第一个简单程序代码
2017/12/13 Python
Python实现修改文件内容的方法分析
2018/03/25 Python
Python高级特性切片(Slice)操作详解
2018/09/27 Python
Python 日期的转换及计算的具体使用详解
2020/01/16 Python
python如何提升爬虫效率
2020/09/27 Python
css3实现椭圆轨迹旋转的示例代码
2018/10/29 HTML / CSS
英国品牌男装折扣网站:Brown Bag
2018/03/08 全球购物
Carter’s OshKosh加拿大:购买婴幼儿服装和童装
2018/11/27 全球购物
Foot Locker澳洲官网:美国运动服和鞋类零售商
2019/10/11 全球购物
音乐专业应届生教师求职信
2013/11/04 职场文书
工作疏忽检讨书
2014/01/25 职场文书
2015年幼儿园毕业感言
2014/02/12 职场文书
黄山导游词
2015/01/31 职场文书
南极大冒险观后感
2015/06/05 职场文书
幼儿园2016年圣诞活动总结
2016/03/31 职场文书
PyTorch 实现L2正则化以及Dropout的操作
2021/05/27 Python
windows系统安装配置nginx环境
2022/06/28 Servers