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 > </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 ></div> (6) 加入绘制图表的JS代码： <script type="text/javascript"> function labelFormatter(label, series) { return "<div >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)交给绘图外挂组件，就能轻松完成统计图表了。 | 