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

2024-07-21 02:08:09

字体：大中小

来源：转载

供稿：网友

商业源码热门下载www.html.org.cn

二、使用owc控件和html表格展现xml数据2.1 基本功能的实现
这里新建了另外一个html页面。为了使用刚才得到的xml数据，在html页面中，采用xml 数据岛：

<xml id="dbxml" src="getdata.asp" onreadystatechange="init()"></xml>

然后，可以利用html表格的绑定功能展现数据：

<table datasrc="#dbxml" 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

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

上一篇：使用XML技术实现OWC对数据库的展示（一）

下一篇：XML数据库探讨1