使用Flot+AJAX绘制图表

发布时间：2020-12-15 21:03:58 所属栏目：百科来源：网络整理

导读：最近在搞一个软件外包比赛，现在还处于分析设计阶段，还没开始编码阶段，因为团队中我对asp.net编程是稍微熟一点的，所以我负责的模块的编程实现上是比较复杂的模块，这里要实现一个图表统计的功能，在开始之初，指导老师说使用报表来实现这个模块，但是自己

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

对于flot的函数的说明

$.plot(placeholder,data,options)

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

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

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,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; } }

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!