利用JSP技术和Chart组件实现基于WEB的统计图表
|
Microsoft? Office Web 组件[2]首次包含在 Microsoft? Office 2000 中。它们是用于向 Web 页添加电子表格、图表和数据处理功能的 ActiveX? 控件的集合。在使用 Microsoft? Internet Explorer 浏览包含 Office Web 组件的 Web 页时，您可以直接在 Internet Explorer 中处理显示的数据，如对数据进行排序和筛选，输入新的数值，展开和折叠明细数据，进行行列旋转以查看源数据的不同汇总信息等。Microsoft? Office Web 控件能够提供所有这些功能，共有三种 Office Web 组件：Spreadsheet 组件、Chart 组件和 PivotTable? 组件。本文将使用其中的Chart 组件。 1、JSP技术与Chart组件 JSP技术是一种在服务器端编译执行的Web设计语言，其脚本语言采用Java，完全继承了Java的所有优点。它能将网页的动态部分与静态部分有效分开，你只要用任何一种你熟悉的网页制作工具，编写规则的HTML，然后通过JSP标记（tag）[3]将动态部分包含进来就可以了,tag绝大部分是以"<%"开始，以"%>"结束的。 Chart组件是 Microsoft Office 使用的数据绑定 ActiveX 控件，用于向 Web 页添加图表功能。我们在安装微软的Office 2000时会缺省安装一个组件Office Web Components，Chart组件就含在这个组件中，对应的文件是msowc.dll。 2、实现实例 本文的运行环境是：Jbuilder7＋Oracle8i，同时运用了JAVABEAN技术来实现与Oracle数据库的连接[4]。 下面的程序graph.jsp实现了从数据库中读出一段时间内内燃机车和电力机车的数值，然后用统计图表显示，用户可以选择图形方式。(以下斜体部分为JSP代码) <%@page contentType="text/html;charset=gb2312" %> <%@ page import="java.sql.*,java.io.*,java.util.*,java.util.Date"%> <jsp:useBean id="zzjwbean" scope="page" class="jsp.zzjw"/> <!-- 用JAVABEAN实现与数据库连接（本段代码略） --> <% /*变量定义略*/ /*获得查询的年,月,起始日期,即: year,month,f_gk_startdate和截至日期f_gk_enddate，本段代码略*/ %> <html> <head> <title> </title> <form name=fm action="" method="post"> </form> <body bgcolor="#DAFAFC"> <script language="vb script"> sub window_onload() Dim categories(34) ''将横坐标的值赋给vb script环境下的数组categories Dim values(34) ''将纵坐标的值赋给vb script环境下的数组values <% i = 0; rs = zzjwbean.executeQuery("select * from T_zzj_dw"); /*获得单位名称*/ while(rs.next()) { %> categories(<%=i%>)=<%="\""+rs.getString("f_fjmc")+"\""%> <% i++; } %> ChartSpace1.Charts.Add‘将图表添加到图表工作区中 ''将变量c设置为 Constants 属性所返回的对象, 因为在 vb script 中不能使用已命名的常量 Set c = ChartSpace1.Constants ChartSpace1.Charts(0).hastitle=true ''图表有标题 ChartSpace1.Charts(0).Title.Font.Name = "仿宋_GB231280" ''标题字体 ChartSpace1.Charts(0).Title.Font.size=11 ''标题字体大小 ChartSpace1.Charts(0).Title.Font.color="blue" ''标题字体颜色 ChartSpace1.Charts(0).Title.caption="<%=year%>年<%=month%>月机车概况月报表统计图" ''标题内容 ChartSpace1.Charts(0).HasLegend = True ''指定图表具有图例 ''指定图表的图形方式为列状图 ChartSpace1.Charts(0).type=c.chChartTypeColumnClustered ''给图表赋横坐标的值 ChartSpace1.Charts(0).SetData c.chDimCategories, c.chDataLiteral,categories ''系列0对应内燃机车统计数值 ChartSpace1.Charts(0).SeriesCollection(0).Caption="内燃机车统计" ''系列0的图例 ''将内燃机车统计的值赋给vb script环境下的数组values <% i = 0; rs1 = null; f_fjbm = ""; rs = zzjwbean.executeQuery("select * from T_zzj_dw"); while(rs.next()) { f_fjbm = rs.getString("f_fjbm"); rs1 = zzjwbean.executeQuery("select sum(f_jc_nrhj) from T_jccwygk where f_jccwy_fj=''"+f_fjbm+"'' and f_date>=''"+f_gk_startdate+"'' and f_date<=''"+f_gk_enddate+"''");/*统计数据*/ if(rs1.next()) { %> values(<%=i%>)=<%=rs1.getInt(1)%> <% i++; } } %> ''将内燃机车统计的值赋给图表的系列0 ChartSpace1.Charts(0).SeriesCollection(0).SetData c.chDimValues, c.chDataLiteral, values ChartSpace1.Charts(0).SeriesCollection.Add ''向图表中添加系列1 ChartSpace1.Charts(0).SeriesCollection(1).Caption="电力机车统计" ''系列1的图例 ''将电力机车统计的值赋给vb script环境下的数组values <% i = 0; rs1 = null; f_fjbm = ""; rs = zzjwbean.executeQuery("select * from T_zzj_dw"); while(rs.next()) { f_fjbm = rs.getString("f_fjbm"); rs1 = zzjwbean.executeQuery("select sum(f_jc_dlhj) from T_jccwygk where f_jccwy_fj=''"+f_fjbm+"'' and f_date>=''"+f_gk_startdate+"'' and f_date<=''"+f_gk_enddate+"''"); if(rs1.next()) { %> values(<%=i%>)=<%=rs1.getInt(1)%> <% i++; } } %> ''将电力机车统计的值赋给图表的系列1 ChartSpace1.Charts(0).SeriesCollection(1).SetData c.chDimValues, c.chDataLiteral, values ''指定纵坐标轴有标题，并赋值，然后指定数据的显示格式 ChartSpace1.Charts(0).axes(c.chAxisPositionLeft).hastitle=true ChartSpace1.Charts(0).axes(c.chAxisPositionLeft).title.Font.Name = "黑体" ChartSpace1.Charts(0).axes(c.chAxisPositionLeft).title.Font.size = 11 ChartSpace1.Charts(0).axes(c.chAxisPositionLeft).title.caption="机车合计(台数)" ChartSpace1.Charts(0).Axes(c.chAxisPositionLeft).NumberFormat = "0.##" ''指定横坐标轴有标题，并赋值 ChartSpace1.Charts(0).axes(c.chAxisPositionBottom).hastitle=true ChartSpace1.Charts(0).axes(c.chAxisPositionBottom).title.Font.Name = "黑体" ChartSpace1.Charts(0).axes(c.chAxisPositionBottom).title.Font.size = 12 ChartSpace1.Charts(0).axes(c.chAxisPositionBottom).title.caption="郑州局机车概况月报表" end sub ''根据用户选择的图形方式，改变图表的形状 sub dd_onchange() ChartSpace1.Charts(0).type=dd(dd.selectedIndex).value end sub </script> </head> <body> <select name="dd" size="1"> <option value="0" selected>列状图</option> <option value="3">栏状图</option> <option value="6">平滑曲线图</option> <option value="18">饼行图</option> <option value="29">面积图</option> </select> <!-- 创建一个图表工作区对象, 名为“ChartSpace1” --> <p> <object id=ChartSpace1 classid=CLSID:0002E500-0000-0000-C000-000000000046 codebase="msowc.dll" style="width:100%;height:350"> </object> </p> </body> </html> |