使用XML技术实现OWC对数据库的展示(二）

二、使用MILY: Verdana">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

这样，我们就得到了数据表格和图表，其最终效果如下：