asp.net

位置:IT落伍者 >> asp.net >> 浏览文章

ASP.NET中实时图表的实现


发布日期:2020年08月26日
 
ASP.NET中实时图表的实现

在对大批量的数据进行分析比较时最常用也是最直观明了的表现方法莫过于绘制趋势图表一般情况下我们利用EXCEL制作各种类型的趋势图表但它们都是基于静态数据的即数据是事先整理好的而不 是动态生成的如果在网上发布只能将绘制好的图表以静态GIF图像发布这无法从根本上满足不同用户对不同数据的需求

ASP擅长服务器端的Web编程操作后台数据库更是它的强项但是用ASP制作实时数据库图表有点困难因为ASP本身并不支持图表功能只能借助第三方控件进行开发如VB的MSChart控件微软推出的NET Framework较好地解决了这个问题微软在NET平台上集成了实时数据库图表制作组件—OWC(Microsoft Office Web Components)通过在ASPNET页面中调用OWC我们可以轻松地绘制出各种类型的实时图表OWC支持近种图表类型包括曲线图折线图柱状图面积图K线图等与MSChart相比OWC功能强大操作简单此外由于OWC是基于服务端的而MSChart只能应用在客户端因此在服务器端的Web开发中MSChart要比OWC逊色不少

下面笔者将结合实例来具体阐述OWC在ASPNET页面中的应用这个实例是笔者开发的项目《化纤产品及其原料市场分析系统》中的一个子系统笔者在该项目中用到OWC充分享受到了OWC的强大功能给开发工作带来的方便

三层结构

系统整体架构采用了B/S三层结构模式将系统分为用户界面层(也称为表现层)业务逻辑层(也称为功能层)和数据库服务层(也称为数据层)开发平台则采用了NET Framework有效地降低了系统对客户机的要求避免了在客户机上分发应用程序与版本控制的困难

● 用户界面层 用户界面采用的是ASPNET技术ASPNET技术的应用增强了系统的通用性客户端只需安装IE或Netscape等任一款浏览器无需加载任何组件

● 业务逻辑层 采用了NET Framework调用OWC的技术能够根据用户的要求快速取得数据库中的数据动态生成图表系统能够支持复杂的检索条件检索速度快响应时间短

● 数据库服务层数据库服务层可采用任何一款关系型数据库在本项目中笔者使用的是SQL Server它能与NET Framework无缝集成数据库存取技术则采用了ADONET

下文我们将着重介绍业务逻辑层的实现方法

图表元素简介

一张完整的图表由若干个元素组成我们必须对它们有所了解才能随心所欲充分自如地对图表进行全方位的控制也才能更好地理解本程序笔者制作了一张简易的图表在图中标注了程序涉及到的主要部位和元素的名称借此帮助读者掌握OWC以及理解本文所引用的代码

使用OWC组件

在这一节里所涉及的源代码摘自于《化纤产品及其原料市场分析系统》该系统在Window /XP简体中文专业版NET Framewrok 环境下通过使用OWC组件的步骤如下

在当前目录中新建一个存放图表文件的子目录chart同时把对该目录的修改权限赋予ASPNET账户具体步骤如下用鼠标右键单击chart目录名选择属性菜单项在弹出的Chart属性对话框中单击安全选项卡再单击添加按钮找到ASPNET账户赋予修改权限单击确定按钮结束这样ASPNET就可以在chart目录中写入图表文件了

定义一个服务器端的Image图像控件该图像的属性imageURL将在程序末尾被指向动态生成的图表文件因此在这里无需为它赋值

< aspimage id=imgChart Width= Height= Visible=False Runat=server>< /aspimage>

添加OWC引用

在使用OWC之前首先必须将OWC的引用加入到解决方案资源管理器具体步骤如下打开解决方案资源管理器面板鼠标右键单击引用选择添加引用菜单在弹出的添加引用对话框中单击COM卡片找到Microsoft Office Web Components 单击选择确定按钮OWC就被添加到了引用中

定义OWC空间并在该空间中加入一个OWC图表owcChart

Dim owcChartSpace As OWCChartSpace = New OWCChartSpace()

Dim owcChart As OWCWCChart = owcChartSpaceChartsAdd

用SQL检索条件进行数据库检索并将检索结果以RecordSet数据集的方式赋给owcChart

OWC只支持RecordSet数据集不支持DataSet数据集因此在检索时不能使用sqlCommandsqlDataAdapter等对象只能使用RecordSet对象进行检索

打开connection连接

ConnADOOpen(connectionString)

RecordsetADOActiveConnection = ConnADO

设置游标为静态游标

RecordsetADOCursorType = ADODBCursorTypeEnumadOpenStatic

RecordsetADOCursorLocation = ADODBCursorLocationEnumadUseClient

变量strSQL中存放了标准SQL检索条件

RecordsetADOOpen(strSQL)

然后将RecordSet数据集赋给OWC对象

owcChartSpaceDataSource = RecordsetADO

在本例中我们假定用SQL语句检索出的数据共有三个字段产品日期和价格这三个字段的值分别与图表中的曲线分类(X)轴和数值(Y)轴的数据一一对应

确定曲线类型并确定区别不同曲线的字段名

首先确定曲线类型为平滑曲线

owcChartType = OWCChartChartTypeEnumchChartTypeSmoothLine

OWC支持在同一张图表中显示两条以上的曲线因此我们必须给出区别不同曲线的依据这个依据就是产品字段的取值具体地说产品字段中有几个不同的取值就会生成几条不同的曲线

owcChartSetData(OWCChartDimensionsEnumchDimSeriesNames 产品

确定分类(X)轴标签与数值(Y)轴标签所对应的字段

首先需要定义owcSeries为OWC的曲线集合然后遍历图表中的每一条曲线日期字段的值赋给分类(X)轴作为X轴刻度标签价格字段的值赋给数值(Y)轴作为Y轴刻度标签如果我们能够确定图表中只有一条曲线也可以省略遍历的过程但这样无疑会降低程序的通用性

Dim owcSeries As OWCWCSeries

For Each owcSeries In owcChartSeriesCollection

owcSeriesSetData(OWCChartDimensionsEnumchDimCategories 日期

owcSeriesSetData(OWCChartDimensionsEnumchDimValues 价格

Next

对坐标轴的属性进行设置

这部分代码通过对坐标轴标题的文字内容颜色大小主要和次要刻度线及其标签主要和次要网络线等方面的设置美化图表读者如果对本段代码中的概念有些模糊可以参考前一部分提供的那张图表具体设置方法请参见以下代码

先定义axis为坐标轴集合

Dim axis As OWCWCAxis

遍历坐标轴集合

For Each axis In owcChartAxes

显示轴标题

axisHasTitle = True

先对分类(X)轴进行设置

If axisType=OWCChartAxisTypeEnum

chCategoryAxis Then

axisHasTickLabels = True

显示X轴刻度标签

axisPosition = OWCChartAxisPositionEnumchAxisPositionBottom

标签的显示位置

axisTitleFontColor =blue

X轴的标题文字颜色

axisTitleFontSize =

X轴的标题文字大小

axisTitleCaption = 日期范围

X轴的标题文字内容

Else

对数值(Y)轴进行设置

axisMajorGridlinesLineColor = silver

Y轴主要网络线的颜色

axisMajorTickMarks = OWCChartTickMarkEnumchTickMarkNone

不显示Y轴主要刻度标记

axisHasTickLabels = True

显示Y轴刻度标签

axisTitleFontColor = blue

Y轴的标题文字颜色

axisTitleFontSize =

Y轴的标题文字大小

axisTitleCaption=价格(千元/吨)

Y轴的标题文字内容

End If

Next

以GIF图像格式输出图表并将图像文件名赋给Image控件

用随机数来生成随机文件名

Randomize()

Dim nFileNameSuffix As Integer

Dim sFileNameSuffix As String

nFileNameSuffix = * Rnd()

sFileNameSuffix = SystemConvertToString(nFileNameSuffix)

以GIF格式输出图表大小为*图表的文件名为polyesterprice_随机数gif存放在chart子目录中

owcChartSpaceExportPicture(MapPath(chart/PolyesterPrice_) + sFileNameSuffix + gif gif

将Image控件的URL指向该图表文件

imgChartImageUrl=chart/PolyesterPrice_ + sFileNameSuffix + gif

通过以上九个步骤我们就完成了一个实时数据库图表的生成与显示在此需要指出的是以上的九个步骤只是生成一张图表必不可少的基本过程通过设置OWC的其他属性可以更好更精确地控制图表的生成与显示方式如图例线条的粗细与颜色坐标轴刻度线及标签的显示频度网络线等这部分笔者不再介绍请参见本文第四部分的源代码

本文代码生成的图表效果请见下图

优化

上文中所有实时生成的图表文件都存放在chart文件夹中由于采用了随机文件名的方式因此这些文件不会互相覆盖但是如此日积月累越来越多的文件不仅占用了硬盘空 间也妨碍了管理降低了性能我们能不能在程序中自动删除以前的图表文件呢?答案是肯定的我们只要在代码文件的Page_Load()函数中放置如下一段代码程序运行的时候就会自动删除当日以前的文件这样chart文件夹中存放的就总是当日生成的图表文件从而有效地避免了文件垃圾

先取得chart文件夹中的文件列表

Dim fileEntries() As String = SystemIODirectoryGetFiles(MapPath(chart))

Dim sFile As String

遍历文件列表

For Each sFile In fileEntries

将文件的生成日期与系统日期相比如果是当日以前生成的文件删除它

If DateTimeCompare(SystemIOFileGetCreationTime(sFile)AddDays( DateTimeNow) < Then

SystemIOFileDelete(sFile)

End If

Next

虽然用OWC生成的图表功能齐全界面美观但它也存在着不少的缺陷首先OWC不支持DataSet数据集这样我们就无法在生成图表的同时使用DataGrid显示数据表除非我们用循环依次取出Recordset记录集中的全部数据手工生成表格或用同样的检索条件对数据库进行二次检索但这无疑要增加服务器的负担其次在同一张图表中绘制的曲线只能是同一种类型或同为平滑曲线图或同为柱状图它不能在同一张图表中显示不同类型的曲线最后在某些细节方面如分类(X)轴的设置方面OWC无法提供更加详细人性化的设置途径如果读者要追求更强大的功能和更好的显示效果笔者向您推荐两个专业的基于NET的图表控件这两个控件分别由Dundas和Softwarefx公司出品都同时支持Web Form和Win Form开发只是这两个控件都是付费的读者如果有兴趣可以到它们的网站去下载DEMO版本以亲身体验一下专业图表控件带来的强大功能

上一篇:ASP.NET数据库连接字符串总结

下一篇:ASP.NET用URLRewriter.dll实现伪静态