使用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;

    }
}