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()

到这里数据就设置完了，功能也搞定了~