最近在搞一个软件外包比赛，现在还处于分析设计阶段，还没开始编码阶段，因为团队中我对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
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; } }