使用Flot+AJAX绘制图表

     最近在搞一个软件外包比赛，现在还处于分析设计阶段，还没开始编码阶段，因为团队中我对asp.net编程是稍微熟一点的，所以我负责的模块的编程实现上是比较复杂的模块，这里要实现一个图表统计的功能，在开始之初，指导老师说使用报表来实现这个模块，但是自己感觉特别是报表自己想把它做得美观一点还是比较困难的，在网上发现使用flot来绘制折线图、饼形图还是比较好的选择，所以自己花了一些时间来研究一番.

对于flot的函数的说明

 $.plot(placeholder, data, options)

 placeholder:可以是JQuery的对象，DOM元素或者JQuery的表达示，要把完成的图放到这个位置上，要有该位置的高度和宽度，如：

使用选择器获取容器：$("# placeholder");

<div id="placeholder" style="width:600px;height:300px;"></div>

data:

data是data series的一个数组

其中一个单一序列的结构如下：

  {    
    color: color or number    
    data: rawdata    
    label: string    
    lines: specific lines options    
    bars: specific bars options    
    points: specific points options    
    xaxis: 1 or 2    
    yaxis: 1 or 2    
    clickable: boolean    
    hoverable: boolean    
    shadowSize: number    
  }    
一般指定它的data和Label

options：来设置图表的一些信息：如是否 显示线或者是否显示节点等

最后来介绍一下data的数据获取

使用ajax来获取数据：

前台代码：

 $(function() {

            var mydata = [];

            var options = {

                lines: { show: true },

                points: { show: true },

                xaxis: { tickDecimals: 0, tickSize: 1 }

            };

            var placeholder = $("#placeholder");

            $.plot(placeholder, mydata, options);

            $("#btn").click(function() {

                var button = $(this);

                $.post("shiyan.ashx", { "id": 2 }, function(data, status) {

                    if (status == "success") {

                        var adata = $.parseJSON(data);

                        for (var i = 0; i < adata.data.length - 1; i++) {

                         mydata.push([adata.data[i], adata.data[i + 1]]);

                            i++;

                        }

                      //  alert(mydata);

                        $.plot(placeholder,[mydata], options);

                    }

                    else

                    { alert("失败！"); }



                });

            });

        });

data的说明：data是一个二维数组：形式如：[[1991,1],[1992,3],[1994,6],[1995,7].....]，当然它的数据类型是int型或者是double、float型，这里的获取的数据的思路是，先获取服务器传过来的数据然后在赋值给data[]，后台传递数据使用JSON的数据格式实现JQuery和后台代码的数据交互,这里有个问题，是在后台代码序列化的是二维数组，但在JQuery反序列化后是一维的数组，（还请大家讨论），在反序列化数据以后有对数组进行了一次转换，转换成了二维数组，然后把参数传给$.plot(placeholder,[mydata], options)，就可以绘制出相应的图形。另外flot的功能还很强大，这仅仅是flot的一小部分，在后来的遇到实际的问题时还会遇到一些问题，还会继续和大家探讨。

附：

下面是后台代码：

   
     

    
      using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Script.Serialization;
using System.Data;
using System.Collections;
using System.Text;
using Newtonsoft.Json;

namespace flot实验
{
 
    
      //
    
      / <summary>
    
      

    
       
    
      //
    
      / $codebehindclassname$ 的摘要说明
    
      

    
       
    
      //
    
      / </summary>
    
      

    
       [WebService(Namespace 
    
      =
    
       
    
      "
    
      http://tempuri.org/
    
      "
    
      )]
 [WebServiceBinding(ConformsTo 
    
      =
    
       WsiProfiles.BasicProfile1_1)]
 public class shiyan : IHttpHandler
 {

 public 
    
      void
    
       ProcessRequest(HttpContext context)
 {
 context.Response.ContentType 
    
      =
    
       
    
      "
    
      text/plain
    
      "
    
      ;
 string action
    
      =
    
      context.Request[
    
      "
    
      id
    
      "
    
      ].ToString();
 
    
      if
    
       (action 
    
      ==
    
       
    
      "
    
      2
    
      "
    
      )
 {
 JSON js 
    
      =
    
       
    
      new
    
       JSON();
 js.data
    
      =
    
      new
    
       
    
      int
    
      [
    
      4
    
      ,
    
      2
    
      ];
 js.data[
    
      0
    
      , 
    
      0
    
      ] 
    
      =
    
       
    
      1999
    
      ; js.data[
    
      0
    
      , 
    
      1
    
      ] 
    
      =
    
       
    
      3
    
      ; js.data[
    
      1
    
      , 
    
      0
    
      ] 
    
      =
    
       
    
      2000
    
      ; js.data[
    
      1
    
      , 
    
      1
    
      ] 
    
      =
    
       
    
      5
    
      ; js.data[
    
      2
    
      , 
    
      0
    
      ] 
    
      =
    
       
    
      2001
    
      ; js.data[
    
      2
    
      , 
    
      1
    
      ] 
    
      =
    
       
    
      9
    
      ; js.data[
    
      3
    
      , 
    
      0
    
      ] 
    
      =
    
       
    
      2002
    
      ; js.data[
    
      3
    
      , 
    
      1
    
      ] 
    
      =
    
      10
    
      ;
 js.label 
    
      =
    
       
    
      "
    
      fhjksjk
    
      "
    
      ;
 JavaScriptSerializer jss 
    
      =
    
       
    
      new
    
       JavaScriptSerializer();
 context.Response.Write(jss.Serialize(js));
 }
 }

 public bool IsReusable
 {
 get
 {
 
    
      return
    
       
    
      false
    
      ;
 }
 }
 }
 public class JSON
 {
 public 
    
      int
    
      [,] data;
 public string label;

 }
}