|
EEP JQuery如何实现统计图表
讯光科技
前言
在ERP项目开发过程中，统计图表(chart)普遍应用于各种统计和报表中，其形象直观，内容清晰。EEP的JQuery网站项目使用了Easyui 插件并且进行了包装，但是easyui并没有提供图表相关的组件和实现方法。为了实现图表功能，需要使用另一些第三方JQuery图表插件来实现图表的功能。本文使用基于jQuery的开源javascript绘图库插件Flot，并结合EEP的N-Tier架构来实现简单的柱状图(barchart)和饼状图(piechart)设计。
准备工作
数据源：使用SQL Server 范例数据库Northwind 的Orders表与Order Details表。
EEP2012：使用EEP2012的JQWebClient网站。
Flot插件下载：http://code.google.com/p/flot/ 并且将需要使用的JS檔加入到EEP的JQWebClient网站中。
Bar chart实例
(1) 实现功能：统计1997年订单的每月销售额, 并以Barchart做比较。
(2) 数据库语句：
select month(orders.OrderDate) as Month,sum(Orders.TotalAmout) as TotalAmount from orders where year(orders.OrderDate)=1997 group by month(orders.OrderDate)
(3) 建立Server端：使用SSingle模版加入一个Server端命名为SBarChart，然后将以上数据库语句复制到Master(infocommand组件)的CommandText属性上，build这个Server端工程。然后在EEPNetServer的Package Manager上加入build好的SBarChart.dll。
(4) 建立Client端：在JQWebClient网站下建立一个ChartExample文件夹存放我们范例的网页，在这个文件夹下加入一个空白网页BarChart.aspx。然后加入EEP使用的js，以及Flot使用的js的参考。
<!-- infolight and easyui js -->
<link href="../js/themes/default/easyui.css" rel="stylesheet" />
<link href="../js/themes/icon.css" rel="stylesheet" />
<script src="../js/jquery-1.8.0.min.js"></script>
<script src="../js/jquery.easyui.min.js"></script>
<script src="../js/jquery.json.js"></script>
<script src="../js/jquery.infolight.js"></script>
<script type="text/javascript" src="../js/datagrid-detailview.js"></script>
<!-- flot js -->
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../flot-master/excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="../flot-master/jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="../flot-master/jquery.flot.categories.js"></script>
<script language="javascript" type="text/javascript" src="../flot-master/jquery.flot.pie.js"></script>
(5) 加入一个div用作图表的显示区域，加入id等属性，以及EEP使用的参数选项infolight-options
<div id="chartid" style="auto;height:500px" infolight-options="remoteName:'SBarChart.Master',tableName:'Master',xField:'Month',yField:'TotalAmount'">
</div>
(6) 加入绘制图表的JS代码。
<script type="text/javascript">
$(document).ready(function () {
var data = [];
var target = $('#chartid');
//获取参数
var remoteName = getInfolightOption(target).remoteName; //Server端remote
var tableName = getInfolightOption(target).tableName; //Server端table
var xField = getInfolightOption(target).xField; //X轴字段
var yField = getInfolightOption(target).yField; //Y轴字段
var url = getRemoteUrl(remoteName, tableName, false); //呼叫Server取得数据的url
var queryWord = new Object(); //查询条件
$.ajax({
type: "POST",
url: url,
data: "queryWord=" + $.toJSONString(queryWord),
cache: false,
async: false,
success: function (returndate) {
if (returndate != null) {
var rows = $.parseJSON(returndate)//将回传的字符串转换成json
for (var i = 0; i < rows.length; i++) {
data[i] = [rows[i][xField], rows[i][yField]]; //给data数组赋值
}
}
},
error: function () {
alert('error');
}
});
$.plot(target, [data], {//将显示的数据内容给予显示的div
series: {
bars: {
show: true,
barWidth: 0.8,
align: "center"
}
},
xaxis: {
mode: "categories",
tickLength: 0
}
});
})
</script>
(7) 在EEPManager中将这个页面挂在Menu上并且设定权限，然后通过VS开启Logon.aspx登陆浏览这个页面。
Pie chart实例
(1) 实现功能：根据不同产品代号，计算单一产品的订单总额，取产品代号1-10做成饼状图。
(2) 数据库语句：
select [Order Details].ProductID,sum([Order Details].UnitPrice*[Order Details].Quantity) as Amout from [Order Details] group by [Order Details].ProductID
(3) 建立Server端：使用SSingle模版加入一个Server端命名为SPieChart，然后将以上数据库语句复制到Master(infocommand组件)的CommandText属性上，build这个Server端工程。然后在EEPNetServer的Package Manager上加入build好的SPieChart.dll。(如同SBarChart.dll的操作方式)
(4) 建立Client端：在JQWebClient网站下的文件夹ChartExample存放我们范例的网页，在这个文件夹下加入一个空白网页PieChart.aspx。然后加入EEP使用的js，以及Flot使用的js引用。(EEP的js同BarChart.aspx的范例)
<script language="javascript" type="text/javascript" src="../flot-master/jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="../flot-master/jquery.flot.categories.js"></script>
<script language="javascript" type="text/javascript" src="../flot-master/jquery.flot.pie.js"></script>
(5) 加入一个div用作图表的显示区域，加入id等属性，以及EEP使用的参数选项infolight-options:
<div id="chartid" style="auto;height:500px" infolight-options="remoteName:'SPieChart.Master',tableName:'Master',labelField:'ProductID',valueField:'Amout'"></div>
(6) 加入绘制图表的JS代码：
<script type="text/javascript">
function labelFormatter(label, series) {
return "<div style='font-size:8pt; text-align:center; padding:2px; color:white;'>ProcuctID: "
+ label + "<br/> TotalAmout: " + series.data[0][1] + "</div>";
}
$(document).ready(function () {
var data = [];
var target = $('#chartid');
//获取参数
var remoteName = getInfolightOption(target).remoteName; //Server端remote
var tableName = getInfolightOption(target).tableName; //Server端table
var labelField = getInfolightOption(target).labelField; //显示的label字段
var valueField = getInfolightOption(target).valueField; //值的字段
var url = getRemoteUrl(remoteName, tableName, false); //呼叫Server取得数据的url
var queryWord = new Object();
queryWord.whereString = "ProductID >=1 and ProductID <10"; // 查询条件
$.ajax({
type: "POST",
url: url,
data: "queryWord=" + $.toJSONString(queryWord),
cache: false,
async: false,
success: function (returndata) {
if (returndata != null) {
var rows = $.parseJSON(returndata)
for (var i = 0; i < rows.length; i++) {
data[i] = {
label: rows[i][labelField],
data: rows[i][valueField]
}
}
}
},
error: function () {
alert('error');
}
});
//flot自身方法
$.plot(target, data, {//将显示的数据内容给予显示的div
series: {
pie: {
show: true,
radius: 1,
label: {
show: true,
radius: 1,
formatter: labelFormatter,
background: {
opacity: 0.8
}
}
}
},
legend: {
show: false
}
});
})
</script>
在EEPManager中将这个页面挂在Menu上并且设定权限，然后通过VS开启Logon.aspx登陆浏览这个页面。
结语
以上是EEP结合Flot插件绘制柱状图和饼状图的简易范例，在设计项目的过程中我们可能不是如此简单的单一幅图，也可能并不是使用flot插件，但是方法是通用的。以此范例抛砖引玉，可以看出此类控件的3个重点，第一加入需要使用到的js引用；第二，设定先是图表的div，注意infolight-option里设定显示统计图的数据源以及图表上的所要显示的字段；第三，通过js程序读取div上设定的数据源以及显示字段(读取后转成JSON格式)，并将其内容显示在div上。由此可见，利用EEP的N-Tier架构从Server端获取到数据之后，前端只要将数据转换成需要的数据形式(如JSON)交给绘图外挂组件，就能轻松完成统计图表了。
|