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

2024-02-24 19:08

本文主要是介绍使用XML技术实现OWC对数据库的展示(二),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

二、使用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源代码)、数据分页等。此外,我们还可以实现通用的数据访问、搜索功能。

 

附:参考文档

1:微软MSDN联机文档中提供了另外一种OWCXML数据的直接绑定来实现图表,其需要同时加载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对数据库的展示(二)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/743075

相关文章

SpringBoot集成Milvus实现数据增删改查功能

《SpringBoot集成Milvus实现数据增删改查功能》milvus支持的语言比较多,支持python,Java,Go,node等开发语言,本文主要介绍如何使用Java语言,采用springboo... 目录1、Milvus基本概念2、添加maven依赖3、配置yml文件4、创建MilvusClient

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的

Node.js 数据库 CRUD 项目示例详解(完美解决方案)

《Node.js数据库CRUD项目示例详解(完美解决方案)》:本文主要介绍Node.js数据库CRUD项目示例详解(完美解决方案),本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考... 目录项目结构1. 初始化项目2. 配置数据库连接 (config/db.js)3. 创建模型 (models/

shell编程之函数与数组的使用详解

《shell编程之函数与数组的使用详解》:本文主要介绍shell编程之函数与数组的使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录shell函数函数的用法俩个数求和系统资源监控并报警函数函数变量的作用范围函数的参数递归函数shell数组获取数组的长度读取某下的

使用Python开发一个带EPUB转换功能的Markdown编辑器

《使用Python开发一个带EPUB转换功能的Markdown编辑器》Markdown因其简单易用和强大的格式支持,成为了写作者、开发者及内容创作者的首选格式,本文将通过Python开发一个Markd... 目录应用概览代码结构与核心组件1. 初始化与布局 (__init__)2. 工具栏 (setup_t

Python虚拟环境终极(含PyCharm的使用教程)

《Python虚拟环境终极(含PyCharm的使用教程)》:本文主要介绍Python虚拟环境终极(含PyCharm的使用教程),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,... 目录一、为什么需要虚拟环境?二、虚拟环境创建方式对比三、命令行创建虚拟环境(venv)3.1 基础命令3

Python Transformer 库安装配置及使用方法

《PythonTransformer库安装配置及使用方法》HuggingFaceTransformers是自然语言处理(NLP)领域最流行的开源库之一,支持基于Transformer架构的预训练模... 目录python 中的 Transformer 库及使用方法一、库的概述二、安装与配置三、基础使用:Pi

关于pandas的read_csv方法使用解读

《关于pandas的read_csv方法使用解读》:本文主要介绍关于pandas的read_csv方法使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录pandas的read_csv方法解读read_csv中的参数基本参数通用解析参数空值处理相关参数时间处理相关

使用Node.js制作图片上传服务的详细教程

《使用Node.js制作图片上传服务的详细教程》在现代Web应用开发中,图片上传是一项常见且重要的功能,借助Node.js强大的生态系统,我们可以轻松搭建高效的图片上传服务,本文将深入探讨如何使用No... 目录准备工作搭建 Express 服务器配置 multer 进行图片上传处理图片上传请求完整代码示例

openCV中KNN算法的实现

《openCV中KNN算法的实现》KNN算法是一种简单且常用的分类算法,本文主要介绍了openCV中KNN算法的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的... 目录KNN算法流程使用OpenCV实现KNNOpenCV 是一个开源的跨平台计算机视觉库,它提供了各