JQuery如何实现统计图表
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插件下载：并且将需要使⽤的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" />
jquery在项目里是干啥的
<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"     infolight-
<div id="chartid"     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"     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: {
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)交给绘图外挂组件，就能轻松完成统计图表了。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。