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>
