二、使用OWC控件和HTML表格展现XML数据
2.1 基本功能的实现
这里新建了另外一个HTML页面。为了使用刚才得到的XML数据，在HTML页面中，采用XML 数据岛：
<XML id="dbXML" src="getData.asp" onreadystatechange="init()"></XML>
 
然后，可以利用HTML表格的绑定功能展现数据：
<table  datasrc="#dbXML" style="width:100%;BORDER-COLLAPSE: collapse;" border=1 cellpadding=0 cellspacing=0>  
<tr>  
 <td><div  type=text  datafld=Stat_Date></div></td>  
 <td><div  type=text  datafld=Call_Num></div></td>
 <td><div type=text datafld=Call_Fee></div></td>  
</tr>  
</table>
 
在刚才的XML数据岛的onreadystatechange事件对应的init()函数中，我们通过如下代码实现OWC的图表：
<OBJECT id=CS1 style="WIDTH:400px;TOP:0px;HEIGHT:280px" 
classid=clsid:0002E556-0000-0000-C000-000000000046 VIEWASTEXT>
</OBJECT>
<script lanaguage=vbscript>
Sub init()
 if(dbXML.readyState="complete") then 
  dim strXML
  set strXML=dbXML.XMLDocument
  createChart strXML,CS1
 end if
End Sub
Sub createChart(byref oxml,cspace) ’根据传入的XML生成图表
  Dim xdoc,xroot,cCnt
  Dim ndx,cnode,txtData,txtCat,txtData2

  Set xdoc=dbXML.XMLDocument
  Set xroot = xdoc.documentElement
  cCnt = xroot.childNodes.length
  txtData = "":txtCat = ""
 
  ’ 从XML数据中得到相应的子符串
  For ndx = 0 To cCnt - 1
Set cnode = xroot.childNodes(ndx)
txtCat = txtCat & cnode.childNodes(0).text
txtData = txtData & cnode.childNodes(1).text
txtData2=txtData2 & cnode.childNOdes(2).text
if ndx <> (cCnt -1) then
 txtCat = txtCat & ","
 txtData = txtData & ","
 txtData2 = txtData2 & ","
end if
  Next
  
  ’---下面开始绘图---------- 
 ’添加数据序列1
 set ch =cspace.Charts.Add() 
 set s = ch.SeriesCollection.Add() 
 s.name="通话费用（元）" 
 s.Caption=s.name 
 s.SetData c.chDimCategories,c.chDataLiteral, txtCat 
 s.SetData c.chDimValues, c.chDataLiteral, txtData 
 s.type=8 ’曲线图 
 
 ’设定时间刻度轴格式 
 Set axCategory = cspace.Charts(0).Axes(c.chAxisPositionCategory)
  with axCategory 
  .GroupingUnitType = c.chAxisUnitMonth ’月 
  .GroupingUnit = 1 ’单位 
  .NumberFormat="Short Date" ’短日期 
 end with 
 
 ’添加数据序列2 
 set s2 = ch.SeriesCollection.Add() 
  s2.name="通话次数（次）" 
 s2.Caption=s2.name 
 s2.SetData c.chDimValues, c.chDataLiteral, txtData2 
 
 ’标题 
 ch.HasTitle = true 
 ch.Title.Caption="通话情况月报" 
 ch.Title.font.color="black" 
 ch.Title.font.size=10 
 ch.Title.font.bold=true 
 
 ’ChartSpace属性
 cspace.Border=c.chLineDash 
 cspace.HasSelectionMarks=true
 cspace.AllowFiltering=true ’允许命令与分组
 cspace.AllowPropertyToolbox=true 
 
 ’设置图例及位置
 ch.Legend.Position=c.chLegendPositionRight 
 ch.HasLegend=false 
 
 ’分成不同的组,显示双坐标轴
 s2.UnGroup TRUE 
 Set axIncomeAxis = ch.Axes.Add(s2.Scalings(c.chDimValues))
 axIncomeAxis.Position = c.chAxisPositionRight
 axIncomeAxis.HasMajorGridlines=false 
 s2.type=0 ’柱形图
 End Sub
 
这样，我们就得到了数据表格和图表，其最终效果如下：
这样，借助于XML技术和IE绑定技术，我们就实现了OWC对数据库中数据的展示，而在客户端并没有暴露任何数据连接信息。
 
2．2 其他功能
OWC可以很容易的实现将所见到的图表保存为本地图片，大大方便了使用者。同时，OWC提供了多种图表类型，如：饼图、曲线图、柱形图等，适合在不同的情况下展现数据。
 
如果借助COM组件、以及对XSL的灵活运用，我们这个页面能得到更好的性能和更强的功能。比如：对HTML表格的排序（参见附件中的HTML源代码）、数据分页等。此外，我们还可以实现通用的数据访问、搜索功能。