基于Chart控件的Web动态图表实现技术

摘要：微软公司基于.NET平台所开发的用于绘制动态图表的chart控件，具有功能强大，美观实用的特点。该文探讨了如何在Web系统中运用这一控件绑定图表的数据源、导出图表数据、处理数据系列以及绘制各类柱形图、圆饼图、雷达图等图表技术，为的Web系统中图形信息的显示、统计和分析提供了一种良好的解决方案。

关键词：Chart；Web动态图表；；数据源；交互式图表

中图分类号：TP311 文献标识码：A 文章编号：1009-3044（2013）36-8321-04

在日常的生活中，我们经常需要对数据进行统计分析，除了直接显示数字值，人们还喜欢借助图表来形象的显示数据本身和数据之间的关联关系。大多数情况下我们采用Excel电子表格来处理数据，它里面提供了丰富的图表工具，可以生成不同类型的图表，如柱形图、圆饼图、雷达图等。随着Internet和Web技术的迅速发展，很多应用和信息数据都通过网络这一载体进行运用，但之前由于缺乏有效的动态图表生成技术支持，的Web系统中在涉及需要图表技术的地方，只能采用静态的非动态的图表技术来实现。随着微软推出的Chart控件，使得这一问题得以解决。该文主要研究Microsoft Chart控件技术在的Web系统中实现动态图表的方法

1 Chart控件

1.1 Chart控件简介

Chart是Microsoft公司基于.NET3.5框架开发的，用于在Web系统中绘制各种动态图表的控件，既能与各种不同的数据源高度集成，所绘制的图表也有漂亮的外观和高度的灵活性，满足用户的需求。

1.2 Chart控件的类结构

Chart控件的功能非常完整和强大。其类的组成架构分为属性、方法和事件三个部分，每个部分内又按照需要细分为各种组成模块。表1、表2和表3分别是控件的属性、方法和事件的内部分类。

表1 Chart控件的属性

[序号＼&属描述＼&1＼&图表区相关属性＼&2＼&数据系列等相关属性＼&3＼&显示相关属性＼&4＼&数据源相关属性＼&5＼&信息提示相关属性＼&6＼&其他属性＼&]

表2 Chart控件的方法

[序号＼&方法功能描述＼&1＼&数据绑定相关方法＼&2＼&图表图像保存相关方法＼&3＼&外观样式及图表绘制相关方法＼&4＼&数据点处理及子控件处理相关方法＼&5＼&服务器控件相关方法＼&6＼&其他方法＼&]

表3 Chart控件的事件

[序号＼&事件功能描述＼&1＼&Click：单击 Chart 控件上时发生。＼&2＼&Customize：在绘制图表图像之前发生。＼&3＼&DataBinding/DataBound：当服务器控件绑定到数据源时/后发生。＼&4＼&Disposed：从内存释放服务器控件时发生。＼&5＼&Init：当服务器控件初始化时发生； ＼&6＼&Load：服务器控件加载到Page中时发生。＼&7＼&PostPaint/PrePaint：绘制图表元素之后发生/在绘制图表元素背景之后发生。＼&8＼&PreRender：加载Control对象之后、呈现之前发生。＼&9＼&Unload：服务器控件从内存卸载时发生。＼&]

2 动态图表结构

图1 动态图表的结构

动态图表的结构主要有图表名称、图例、坐标轴标题、绘图区、图表区、主要网格线、次要网格线、主要刻度值、次要刻度值和值标签等。

3 Web图表的实现

3.1 控件程序集的引入

在的Web项目中使用Chart控件，首先需要在Web.config文件的配置节的子节里面引入，这样项目在编译的时候可以找到引用的控件程序集。如果只有很少的网页需要使用Chart控件，那么直接从工具箱的Data标签中将Chart控件施放到网页上就可以了。

3.2 数据源的绑定

动态图表显示的内容来源于数据，因此控件如何从数据源获取数据是关键的一步。为了能适应不同类型的数据源，Chart控件被设计为可以通过三种方法与数据源绑定。

第一种方法：使用DataSource属性进行绑定。先通过SQL调用从数据源中获得数据放入数据适配器中，再将其填充到中的SqlCommand对象，再将此对象赋给Chart控件的DataSource，实现数据到Chart控件的绑定。

第二种方法：用DataSourceID进行数据绑定。针对动态设置图表数据源的第二种方式，就是将某一个数据源控件（例如SqlDataSource或ObjectDataSource控件）的ID值指派给Chart控件的DataSourceID。

第三种方法：通过IEnumerable接口进行数据绑定。使用Chart的DataBindTable方法控件绑定到一个实现IEnumerable接口的对象，它会根据数据源中的字段自动创建数据系列，每个字段的数据都会成为一个数据系列，并添加到Chart控件中。

3.3 数据的导出

Chart控件中的DataManipulator.ExportSeriesValues方法能将图表的所有数据系列数据全部导出到DataSet对象中，数据中的每一个系列都会成为DataSet对象中的一个数据表，数据坐标的X值与Y值会在数据表中成为字段，字段名称就是X与Y。如果数据系列拥有多个Y值，这些Y值也都会在数据表中各自成为一个字段额，字段名称则是Y，Y2，Y3…..以此类推。同样，

如果拥有多个X值，也会在数据表中各自成为一个字段。

图2 数据导出状态图

上面图表中每个部门分别有三个数据系列，在导出之后，以X和Y值分别形成三个独立的数据表。

3.4 数据系列的处理

数据系列处理首先是分割、合并和复制三种操作。分割是指让一个数据系类成为多个数据系列，即从单一来源数据系列复制多个Y值到多个目标数据系列。合并是从多个来源数据系列中将值复制到单一目标数据系列中，是分割数据系列的反方向操作。复制则指其他所有的复制数据系列操作。

不论分割、合并还是复制数据系列，都是通过Chart.DataManipulator.CopySeries Values方法来完成。在这些操作之后，都会产生新的数据系列，如果要删除原有的数据系列，必须自行将其删除。

图3中原本只有一个数据系列，因此只显示柱状动态图。图4中将数据系列复制为两份，一份显示原先的柱状图，另外一份数据系列用来显示饼图。

图3 单个数据系列的效果图

图4 多个数据系列的效果图

数据系列处理的另一种主要操作是检索操作，此操作允许用户在表格中点击某一数据，该数据行在图表中所对应的数据点便会搜索出来，并且外观也会改变，以便让用户更容易在图表中识别。

图5 数据检索的效果图

实现原理：获取用户在GridView控件中所选择数据行的主键，如上图中的数据行主键员工编号2，然后利用FindByValue方法在数据系列中搜索，最后在图表区内修改搜索到的数据点外观（图中将柱状图的背景色改为红色）以便识别。

3.5 交互式图表实现

网页上的图表只是一个图片，不具备和用户的交互性，而Chart控件却能通过事件触发机制实现图表和用户之间的交互。图6和图7演示了如何根据用户点击的区域，动态的将所点区域的数据饼图从图中分离出来的过程，功能实现的描述如下：

首先根据数据值，定义出特定形状的作用点区域。当页面捕捉到用户的单击行为之后，取得被单击的作用点坐标值，再根据事先所设定的特定形状的作用点区域，判断是哪一个点被单击，并将这个点的PostBackValue值，传递给Click事件处理程序中的自变量对象类型ImageMapEventArgs的PostBackValue属性，引发页面回发并执行Click事件处理程序，响应用户请求，将对应的数据扇形区移出。

4 结束语

本文探讨了如何在Web系统中运用微软公司的chart控件绑定图表的数据源、导出图表数据、处理数据系列以及绘制各类柱形图、圆饼图、雷达图等图表技术。为的Web系统中图形信息的显示统计和分析提供了一种良好的解决方案。

参考文献：

[1] 张成才.基于OWC的动态统计图表的设计与实现[J].计算机技术与发展， 2009（10）.

[2] 王永会.一种WebMI S中的统计图形动态生成方法[J].微计算机应用，2008（1）.

[3] 林永兴.一种基于OWC在Web页动态绘制图表的方法[J].计算机与现代化，2010（1）.

[4] 杜利峰. 基于. NET 的企业统计图表的动态绘制方法研究[J].信息技术，2012（4）.

[5] 丁剑博. OWC 系列控件的图形化开发与应用[J].微计算机时代，2011（1）.