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>
文章整理：西部数码--专业提供域名注册、虚拟主机服务
http://www.west263.com
以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!
