您现在的位置： 阿标在线 >> 技术文章 >> JSP技术 >> Jsp/Servlet >> 正文

利用JSP技术和Chart组件实现基于WEB的统计图表

[ 录入：阿标 | 点击数： | 更新时间：2005-3-18 12:49:00]
JSP（Java Server Pages）[1]是由Sun微系统公司于1999年6月推出的一项新技术，是基于JavaServlet以及整个java体系的Web开发技术，利用这一技术可以建立先进、安全和跨平台的动态网站。JSP 与Microsoft的ASP（Active Server Pages）技术非常相似。两者都提供在HTML 代码中混合某种程序代码、由语言引擎解释执行程序代码的能力。在ASP或JSP 环境下，HTML代码主要负责描述信息的显示样式，而程序代码则用来描述处理逻辑。ASP下的编程语言是 vb script 之类的脚本语言，而JSP 使用的是Java。

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>

  • 上一篇文章：

  • 下一篇文章：