2014-06-13 jq chart
昨天接到上级说要在检测服务器上增加一个可以根据时间来查看服务器信息的线形图,那我首先就在原有的发送监控信息的功能上增加了把信息存入数据库中,然后再数据库中取得数据显示.
至于线形图的插件是jqx 的chart 网址是:http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxchart/index.htm?%28arctic%29
我用的是chart的Axis Position.大致是这样的
选择时间的我用的是my97的时间插件
在编写功能中遇到了如下几个问题:
1.因为检测的服务器的盘符可能是会改变的,所以盘符是需要动态取得,在发送监控信息中我只能是把硬盘的所有信息存在了一个字段中,这样就导致了我在chart中获取数据源的时候取数据中,遇到了字符串截取的困难(在这个上,我承认自己是太差了),因为获得chart数据源是通过ajax获取的,而返回的数据设置的是json格式.在返回json格式之前,通过sql查询到的数据是个表结构的,所以就在把硬盘信息截取到的信息存到了表中
Handler1.ashx
1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Web; 5 using MySql.Data.Common; 6 using MySql.Data.MySqlClient; 7 using System.Data; 8 using Newtonsoft.Json; 9 using Newtonsoft.Json.Converters; 10 using System.Text.RegularExpressions; 11 12 namespace WebApplication1.js.ajax 13 { 14 /// <summary> 15 /// Handler1 的摘要说明 16 /// </summary> 17 public class Handler1 : IHttpHandler 18 { 19 20 public void ProcessRequest(HttpContext context) 21 { 22 context.Response.ContentType = "text/plain"; 23 MySqlConnection conn = new MySqlConnection("server=localhost;user id=root;password=123456;database=serverinfo;"); 24 conn.Open(); 25 26 string sql = "select DiskInfo,RAMSInfo,RAMUInfo,CPUInfo,DataValue,DateTime from serverinfo"; 27 MySqlDataAdapter ad = new MySqlDataAdapter(sql, conn); 28 DataSet ST = new DataSet(); 29 ad.Fill(ST,"info"); 30 31 //取得服务器硬盘的盘数 C: 总空间为45G,剩余12.72G D: 总空间为141.01G,剩余129.62G E: 总空间为140.01G,剩余137.07G F: 总空间为139.73G,剩余128.82G 32 33 //1.算出 硬盘盘数/盘符 2.往ST中添加列 3.往列中添加数据 34 string disk = ST.Tables[0].Rows[0]["DiskInfo"].ToString().Trim(); 35 string[] dis = Regex.Split(disk, " ", RegexOptions.IgnoreCase); //盘数就是 dis.length-1 36 for (int i = 0; i < dis.Length; i++) //dis.Length=5 37 { 38 ST.Tables[0].Columns.Add(dis[i].Substring(0, 1)); //往ST中添加列 39 ST.Tables[0].Columns.Add(dis[i].Substring(0, 1)+"S"); 40 } 41 for (int n = 0; n < ST.Tables[0].Rows.Count; n++) //往ST新增列中添加数据 42 { 43 for (int j = 0; j < dis.Length; j++) 44 { 45 46 string data = ST.Tables[0].Rows[n]["DiskInfo"].ToString().Trim(); //当前行的数据 47 string[] datas = Regex.Split(disk, " ", RegexOptions.IgnoreCase); //当前行各盘的数据 48 string PF=dis[j].Substring(0, 1); 49 string PFS = dis[j].Substring(0, 1)+"S"; 50 51 string pattern = @"\d+(\.\d+)?[G]"; 52 RegexOptions regexOptions = RegexOptions.None; 53 Regex regex = new Regex(pattern, regexOptions); 54 string inputData = @""+datas[j]+""; 55 56 57 for (int m = 0; m < regex.Matches(inputData).Count-1; m++) 58 { 59 ST.Tables[0].Rows[n][PF] = regex.Matches(inputData)[m]; //存入数据 60 ST.Tables[0].Rows[n][PFS] = regex.Matches(inputData)[m+1]; 61 } 62 } 63 } 64 65 IsoDateTimeConverter iso = new IsoDateTimeConverter(); 66 iso.DateTimeFormat = "yyyy-MM-dd"; 67 string st= JsonConvert.SerializeObject(ST,iso); 68 69 context.Response.Write(st); 70 } 71 72 public bool IsReusable 73 { 74 get 75 { 76 return false; 77 } 78 } 79 } 80 }
View Code
这样chart就获得了数据源,而在这里也出现了第二个问题,
2. 在chart中设置硬盘信息的时候,因为硬盘信息是动态取得,seriesGroups中的series信息就没法写死,在jqx中貌似提到了一点,就是用数据绑定的方法 dome在这:http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxchart/index.htm#demos/jqxchart/javascript_chart_donut_series.htm ,这样绑定的话就只能全部数据绑定,当时我设置的数据就只剩下硬盘的信息了,从头再来全部绑定太得不偿失了,后来用到的是写一个函数赋值给seriesGroups中的series, 这里又遇到了第三个问题.
3.在series 中设置的数值 是object的键值对格式,如何设置呢?请看下面代码
1 function Diskinfo() { 2 var source; 3 $.ajax({ 4 async: false, 5 type: "POST", 6 url: "js/ajax/Handler2.ashx", 7 success: function (data) { 8 source = data; 9 } 10 }); 11 var tempArr = source.split(','); 12 var arr = []; 13 //var str=[]; 14 if (source) { 15 for (var i = 0; i < tempArr.length-1; i++) { 16 var disk = tempArr[i]; 17 if (i % 2 == 0) { 18 var obj = { dataField: disk, displayText: disk + "总" }; 19 arr.push(obj); 20 //str+= "{ dataField: '" + disk + "', displayText: '" + disk + "总' },"; 21 } else { 22 //str+= "{ dataField: '" + disk + "', displayText: '" + disk + "剩余' },"; 23 var obj = { dataField: disk, displayText: disk + "剩余" }; 24 arr.push(obj); 25 } 26 27 } 28 } 29 //arr.push(str); 30 return arr; 31 }
这样得到的数据就是object类型的键值对啦~
然后赋值series:Diskinfo()
到这里数据就设置完了,功能也搞定了~
转载于:https://www.cnblogs.com/chongde/p/3786205.html
2014-06-13 jq chart相关推荐
- 《对象程序设计》课程 课程设计、考试安排 及 教师建议(2014.06.30修正)
[网络问卷-2014.06.30 上午11:30左右回答] 网络121班<对象程序设计>课程设计自我评估调查(问卷网址:http://www.sojump.com/jq/3614612.a ...
- 2014/08/13 – Backbonejs
2014/08/13 – Backbonejs [来自: Backbone.js 开发秘笈 第7章] Restful 服务调用 Collection.fetch() - 请求集合 Model.save ...
- 【转】傅里叶分析之掐死教程(完整版)更新于2014.06.06
转自:傅里叶分析之掐死教程(完整版)更新于2014.06.06 - 知乎 作 者:韩 昊 知 乎:Heinrich 微 博:@花生油工人 知乎专栏:与时间无关的故事 谨以此文献给大连海事大学的吴楠老师 ...
- [转载]傅里叶分析之掐死教程(完整版)更新于2014.06.06 - 与时间无关的故事 - 知乎专栏...
傅里叶分析之掐死教程(完整版)更新于2014.06.06 Heinrich 作 者:韩 昊 知 乎:Heinrich 微 博:@花生油工人 知乎专栏:与时间无关的故事 谨以此文献给大连海事大学的吴楠老 ...
- ALLyeSNO优化版浩方 Ver:2007.06.13 呵呵今天整合出来的
都是利用网上的工具合成的 不是100%原创 勉强可用 不喜欢的不要用板砖拍 ALLyeSNO优化版浩方 Ver:2007.06.13 请运行目录下的 ALLyeSNO优化版浩方 文件进行游戏 特色: ...
- python爬虫获取天猫店经营者资质证书(更新到2020.06.13
python爬虫获取天猫店经营者资质证书(更新到2020.06.13 爬取需求 excel表中给定多个天猫的店铺链接,获取店铺的经营者资质证书,保存为本地图片 代码基于之前写的一个博客https:// ...
- 2014.9.13模拟赛【数位和乘积】
数位和乘积(digit.cpp/c/pas) [题目描述] 一个数字的数位和乘积为其各位数字的乘积.求所有的N位数中有多少个数的数位和乘积恰好为K.请注意,这里的N位数是可以有前导零的.比如01,02 ...
- 每天一本书 [2014/06/10-2014/07/10 ]
书单: 1.<思维导图>-Tony Buzan,P292 配合<你的第一本思维导图操作书>制作导图 √ 需测试 2.<快速阅读>-Tony Buzan,P2 ...
- 基于matlab的语音信号,科学网—[转载]【信息技术】【2014.06】【含源码】基于MATLAB的语音信号处理与分析 - 刘春静的博文...
本文为瑞典耶夫勒大学(作者:Nan Wu)的学士论文,共48页. 语音传递是人类最重要.最有效.最常用的信息交流方式.语言是人类特有的特征,而人声是常用的工具,也是相互传递信息的重要途径.语音具有较大 ...
最新文章
- 1.1 对象的概念及面向对象的三个基本特征
- nginx 502
- tomcat截取日志_Tomcat的日志分割三种方法
- python总结教程_python基础教程总结10——文件
- 1900页Python系列PPT分享二:Python序列(列表、元组、字典、集合)(154页)
- linux ddd yum,Linux环境ddd安装与使用
- 运行adb devices命令后 显示 List of devices attached 无法获取设备解决方法
- 并发 --- 32 管道 事件 信号量 进程池
- Python入门(基本概念一)
- 我对Asp.net页面一系列执行过程的认识
- 谈谈JProfiler的实现原理
- 【语音去噪】基于matlab基本维纳滤波算法语音去噪【含Matlab源码 570期】
- 动态域名解析服务(花生壳)
- [ 物联网篇 ] 27 -使用libcur API 实现本地时间同步的功能,类似NTP功能
- WPS 多文档独立显示
- 如何快速学习:掌握任何技能的 10 种行之有效的方法
- android 短信消失,警告!安卓用户慎重使用谷歌Messages,短信会无端丢失
- 微信小程序云开发:使用excel-export导出excel
- c++/mfc 播放音乐,视频文件
- GPU大百科全书 第一章:美女 方程与几何