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

}
}

转载于:https://www.cnblogs.com/JerryWang1991/archive/2011/06/24/2089338.html