二、使用OWC控件和HTML表格展現XML數據<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" />
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源代碼）、數據分頁等。此外，我們還可以實現通用的數據訪問、搜索功能。
附：參考文檔
1：微軟MSDN聯機文檔中提供了另外一種OWC對XML數據的直接綁定來實現圖表，其需要同時加載datasourceControl控件或者Spreadsheet控件。參見：
http://msdn.microsoft.com/library/en-us/dnowcbk/html/odc_chap4owc.asp?frame=true#odc_chap4owc_xml
2：本文檔參考了OWC ToolPack文檔中的VBScript生成ChartSpace圖表的相關內容。OWC ToolPack是微軟推薦的進行OWC開發的最佳參考文檔。下載地址如下：
http://www.microsoft.com/downloads/details.aspx?FamilyId=BEB5D477-2100-4586-A13C-50E56F101720&displaylang=en
