统计图是最重要的统计描述方法之一 ,它具有直观明了、易于理解的优点 ,是应用系统中对统计结果
进行比较和分析最常用的一种方法。因此,在web系统开发中,统计图也就成了最常用的数据表现方式。
早期的web应用程序开发工具 中没有统计 图绘制工具 ,在刚推 出的.NET Framework中,可以安装使用水
晶报表组件来绘制统计图,虽然水晶报表可以快速创建复杂 、具有专业外观的报表 ,但是 ,使用水 晶报表并
不灵活 ,对于展示从数据库中提取但要经过外部程序处理的数据,就难以实现某些特殊需求。
本文采用 Visual C撑.NET,应用 GDI+组件实现统计图的绘制 ,该方法通用性强 ,可以满足 Web系
统开发需求 。
1 GDI+简介 ~。
GDI(Graphices device Interface)是通用的绘 图技术 ,在.NET框架 中,更新为 GDI+,它为使用托管
代码的程序员提供了一种基于类的应用程序编程接 口API。它使应用程序能够在视频显示和打印机上
使用图形和格式化文本。确切的说 ,GDI+是 由 .NET Framework中的 System.Drawing命名空间提供的
一 组类 ,它使开发人员可以利用 Windows内置的图形功能轻松地创建图形应用程序。
利用 GDI+的优点是将应用程序 与图形硬件 隔 表1 GDI+中常用对象简介
离,这样就允许开发人员创建与设备无关的应用程
序。开发人员可利用 GDI+这样的图形设备接 口在
屏幕或打印机上显示信息 ,而不需要考虑特定显示
设备的具体情况 。
GDI+绘图由Graphics类表示。创建 Graphics
对 象 功 能
Brash 用于使 用图案 、颜 色或位 图填充封 闭表 面。
Pen 用于绘制线和 多边形 ,包括 矩形、弧线和扇形 。
Font 用于描述 用来呈现文本的字体。
Color 用于描述 用来呈现特定对象的颜 色。在 GD1+中,
颜 色可 以 是 Alpha混 合 效 果 的 。
对 象后 ,可 以使用它绘制线 、填充形状 、绘制文本等 ,II~ bGDI+支持各种图像格式 ,包括 .jpeg、.png、
. gif、.bmp、.tif、.exif和 .icon文件。GDI+中常用对象如表 1所示 。
2 统计 图简介及 实现 思路
2.1 统计 图简 介
统计图是重要的统计描述方法 ,它将数字资料 以可视化方式呈现出来,可以简明清晰地表达数据间
收稿 日期 :2004—02—26
基金 项 目:总后勤部物资油料部资助项 目(油20030211)
作 者简 介 :罗少锋(1980一),男,陕西宝鸡人,硕士生,从事仓储勤务与后勤信息化研究。
维普资讯 http://www.cqvip.com
2O 后 勤 工 程 学 院 学 报 2004年
的对应关系。同样 的事实 ,用文字叙述可能需要进行长篇大论的解释,而且还受语言不同的限制 ,而用
统计图则可一 目了然。
统计图按所在的空间可以分为二维平面统计图和三维立体统计图两大类 。
平面统计图中最常见的有折线图、直方图和圆饼图。通常,折线 图是用 以表示发展趋势 ,反映事物
连续 的动态变化规律 ;直方图则用来 比较各分类的大小,适用于相互独立资料间的比较 ;而圆饼 图的作
用是描述各部分 的百分比构成 ,可明显看出各分类 占总数的比例。
立体统计图实质上是平面统计图在表现形式上 的延伸 ,其 中最常见的是柱状统计 图(见图 1)和饼
状统计图(见图2),它们的用途分别与直方图和圆饼图相同。
图 1 柱 状统计 图示例
中专
高中 3} %
擘 6.3%
21.4%
图2 饼状统计图示例
2.2 统 计 图实现 的总 思路
在 Web应用程序中绘制统计图,总的思路都可大致分为如下 3个步骤 :
数据准备。在实际应用开发中,要用于展示的数据通常大都来 自数据库。因此 ,这部分具体又包含
如下步骤 :与数据库的连接、从数据库中取得合适 的数据、对数据作进一步的处理、将合适 的数据存人数
据集合(如数组、哈希表等)。
图形绘制。完成了数据准备工作 ,接下来就是按此数据绘制统计图形。通常又可分为绘制背景、绘
制参照系 、绘制图例、绘制主体等。
调用显示。完成绘制过程后 ,就可以将绘制好的统计图形返 回给调用页面,显示于合适的位置。
Web应用程序 中绘制统计图的总思路是相 同的,但各种常用统计 图的具体实现又有区别 :折线图
主要应用描点与绘制线段的方法实现,直方图则主要应用矩形的绘制与填充 ,而圆饼图则要用到扇形的
绘制与填充 ,柱状统计图要应用矩形和多边形的绘制与填充,饼状统计 图要用到扇形与椭圆扇形的绘制
与填充。
下面就按上述思路 ,分别以柱状统计 图和饼状统计图为例 ,结合 Visual c#.NET与 Oracle数据库来
阐述统计 图实现的关键技术和具体步骤。
3 应用 GDI+实现 统计 图绘制的关键技 术和具体 步骤
3.1 准 备工作
(1)建立 Web应用程序。在 Microsoft Visual Studio.NET中,新建一个 Visual C#项 目,在该项 目下
创建一个 ASP.NET应用程序 ,命名为WebCharts,设定起始页名称为 Default.aspx。
(2)在该应用程序中,新建名为 Chart.aspx的web窗体页。在 Chart.aspx.CS页中添加如下代码 :
using System.Data.OleDb; //.NET 数据提供程序 ,描述用于访问数据源的类的集合 。
using System.Drawing; //提供对 GDI+ 基本 图形功能的访问。
using System.Drawing.Imaging; //提供高级的 GDI+ 图像处理功能。
3.2 绘 制柱 状统计 图的关 键步 骤
3.2.1 数 据 准备
(1)与 Oracle数据库的连接
维普资讯 http://www.cqvip.com
第 3期 罗少锋等 WEB系统 中统计图绘制研究 21
string connstr=”Provider=MSDAORA.1;Password=密码 ;User ID=用户名 ;Data Source=数据源”;
OleDbConnection Conn=new OleDbConnection(connstr);
(2)从数据库 中检索所需的数据并存人驻 留内存 的数据集(DataSet)
OleDbDataAdapter adpt=new OleDbDataAdapter(”Orale中的 SQL命令”,Conn);
DataSet pSet=new DataSet();
adpt.Fill(pSet);
(3)处理驻留内存 的数据 ,存人排序列表(SortedList)
SortedList pList=new SortedList();
for(int i=O;i<pSet.Tables[0].Rows.Count;i++)
{ double dcount=(double.Parse(pSet.Tables[0].Rows[i][”数量”].ToString()));
pList.Add(pSet.Tables[0].Rows[i][”种类”].ToString(),dcount);
}
3.2.2 图形绘 制
(1)初始化
int H=300,W=420; //H、W为输 出图形 的高度、宽度
int th=H一100,tw=W 2/3; //内部主体图形的高度、宽度
int Z=20,S=20; //内部主体图形距左边和上边的距离
int Y=Z+tw+1O,X=S+th; //内部主体图形距右边和下边的距离
Bitmap newBmp=new Bitmap(W,H,PixelFormat.Format32bppArgb); //创建一个位图对象
Graphics g=Graphics.FromImage(newBmp); //声 明一个图形对象 ,在上面创建的位图上画图
g.Clear(Color.White); //清除整个绘图面并以白色填充背景
(2)绘制坐标系
g.DrawLine(bpen,new Point(Z一2,S+5),new Point(Z,S)); //绘制一段直线 ,bpen为 已定义的
钢笔
g.DrawString(tmp,new Font(”宋体”,9),Brushes.Black,new PointF(Z+5,i一5));//标参照高度,
tmp为要绘制 的字符 串
(3)绘制柱体和图例并标示
foreach(DictionaryEntry entry in pList)
{
//用伪随机函数随机生成颜色 ,并以此颜色定义笔刷
Random md=new Random();
int R=(int)(md.NextDouble() 255);
int G=(int)(md.NextDouble() 255);
int B=(int)(md.NextDouble() 255);
Brush bru=new SolidBrush(Color.FromArgb(R,G,B));
//绘制图例
g.FillRectangle(bru,Y,flag,10,10); //填充矩形 ,flag为要绘制 图例左上顶点纵坐标
string tmp=string.Fo~at(”{0}:{1: .#}'',entry.Key,(decima1)entry.Value);
g.DrawString(tmp,new Font(”宋体 ”,9),Brushes.Black,new PointF(Y+13,flag)); //标示 图
例 意义
//计算柱体在参照系中的高度 height(略)
//填充柱体正面(其 中start为该柱体左上顶点横坐标 ,permwidth为柱体正面宽度)
g.FillRectangle(bru,start,X—height,permwidth,height);
维普资讯 http://www.cqvip.com
22 后 勤 工 程 堂 院 堂 报 QQ璺
//填充柱体顶侧面(其中 ew为柱体侧面宽度,dw为顶面高度)
PointF[]ZMPoints={new PointF((float)(start),(float)(x—height)),
new PointF((float)(start+ew),(float)(X—height—dw)),
new PointF((float)(start+ew+permwidth),(float)(X—height—dw)),
new PointF((float)(start+permwidth),(float)(X—height)),};
g.FiUPolygon(bru,ZMPoints);
//填充柱体右侧面(类似顶侧面,略)
//绘制三面相交的棱(略)
//绘制柱体所代表 的实际数量及种类(略)
}
3.2.3 调 用 显 示
(1)将绘制好的图形在内存中存为.gif格式图片 ,供外部程序调用
newBmp.Save(Response.OutputStream,System.Drawing.Imaging.ImageFormat.Gif);
(2)在起始页Default.aspx的 HTML代码中加入如下代码段 ,调用上面生成 的图片
<img SrC=”Chart.aspx”>
绘制 的柱状统计 图示例如图 1所示。至此 ,已完成 了柱状统计 图的整个绘制过程 。饼状统计 图的
绘制过程与柱状统计 图类似 ,有了上述基础 ,下面仅简要阐述其不同之处 。
3.3 绘 制饼状 统计 图的关 键步 骤
3.3.1 数据 准备
(1)、(2)参 见“3.2.1”。
(3)与3.2.1中不同之处:存人排序列表(SortedList)中的数据不是数据库中的原数据 ,而是转化为
每个种类所对应的百分 比小数。
3.3.2 图形绘制
(1)初始化
int H=260,W=400; //H、W为输出图形的高度 、宽度
int th=150,tw=130; //内部主体图形的高度、宽度
int YX_ x=50,Yx-y=50; //圆心坐标
(2)绘制主体和图例
foreaeh(DietionaryEntry entry in pList)
{
//用伪随机函数随机生成颜色 ,并以此颜色定义笔刷(略)
//绘制图例(略)
g.FiUPie(bru,new Rectangle(YX_x,YX ,th,tw),start,(int)((double)(entry.Value)}3.6));
g.DrawPie(bpen,new Rectangle(YX—X,YX—Y,th,tw),start,(int)((double)(entry.Value)}
3.6));
start+=(int)((double)(entry.Value)}3.6);//下次绘制起始角度
count+ + :
}
3.3.3 调用显示(参见3.2.3)
绘制的饼状统计 图示例见图2。
<script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type=text/javascript> </script>
进行比较和分析最常用的一种方法。因此,在web系统开发中,统计图也就成了最常用的数据表现方式。
早期的web应用程序开发工具 中没有统计 图绘制工具 ,在刚推 出的.NET Framework中,可以安装使用水
晶报表组件来绘制统计图,虽然水晶报表可以快速创建复杂 、具有专业外观的报表 ,但是 ,使用水 晶报表并
不灵活 ,对于展示从数据库中提取但要经过外部程序处理的数据,就难以实现某些特殊需求。
本文采用 Visual C撑.NET,应用 GDI+组件实现统计图的绘制 ,该方法通用性强 ,可以满足 Web系
统开发需求 。
1 GDI+简介 ~。
GDI(Graphices device Interface)是通用的绘 图技术 ,在.NET框架 中,更新为 GDI+,它为使用托管
代码的程序员提供了一种基于类的应用程序编程接 口API。它使应用程序能够在视频显示和打印机上
使用图形和格式化文本。确切的说 ,GDI+是 由 .NET Framework中的 System.Drawing命名空间提供的
一 组类 ,它使开发人员可以利用 Windows内置的图形功能轻松地创建图形应用程序。
利用 GDI+的优点是将应用程序 与图形硬件 隔 表1 GDI+中常用对象简介
离,这样就允许开发人员创建与设备无关的应用程
序。开发人员可利用 GDI+这样的图形设备接 口在
屏幕或打印机上显示信息 ,而不需要考虑特定显示
设备的具体情况 。
GDI+绘图由Graphics类表示。创建 Graphics
对 象 功 能
Brash 用于使 用图案 、颜 色或位 图填充封 闭表 面。
Pen 用于绘制线和 多边形 ,包括 矩形、弧线和扇形 。
Font 用于描述 用来呈现文本的字体。
Color 用于描述 用来呈现特定对象的颜 色。在 GD1+中,
颜 色可 以 是 Alpha混 合 效 果 的 。
对 象后 ,可 以使用它绘制线 、填充形状 、绘制文本等 ,II~ bGDI+支持各种图像格式 ,包括 .jpeg、.png、
. gif、.bmp、.tif、.exif和 .icon文件。GDI+中常用对象如表 1所示 。
2 统计 图简介及 实现 思路
2.1 统计 图简 介
统计图是重要的统计描述方法 ,它将数字资料 以可视化方式呈现出来,可以简明清晰地表达数据间
收稿 日期 :2004—02—26
基金 项 目:总后勤部物资油料部资助项 目(油20030211)
作 者简 介 :罗少锋(1980一),男,陕西宝鸡人,硕士生,从事仓储勤务与后勤信息化研究。
维普资讯 http://www.cqvip.com
2O 后 勤 工 程 学 院 学 报 2004年
的对应关系。同样 的事实 ,用文字叙述可能需要进行长篇大论的解释,而且还受语言不同的限制 ,而用
统计图则可一 目了然。
统计图按所在的空间可以分为二维平面统计图和三维立体统计图两大类 。
平面统计图中最常见的有折线图、直方图和圆饼图。通常,折线 图是用 以表示发展趋势 ,反映事物
连续 的动态变化规律 ;直方图则用来 比较各分类的大小,适用于相互独立资料间的比较 ;而圆饼 图的作
用是描述各部分 的百分比构成 ,可明显看出各分类 占总数的比例。
立体统计图实质上是平面统计图在表现形式上 的延伸 ,其 中最常见的是柱状统计 图(见图 1)和饼
图 1 柱 状统计 图示例
中专
高中 3} %
擘 6.3%
21.4%
图2 饼状统计图示例
2.2 统 计 图实现 的总 思路
在 Web应用程序中绘制统计图,总的思路都可大致分为如下 3个步骤 :
数据准备。在实际应用开发中,要用于展示的数据通常大都来 自数据库。因此 ,这部分具体又包含
如下步骤 :与数据库的连接、从数据库中取得合适 的数据、对数据作进一步的处理、将合适 的数据存人数
据集合(如数组、哈希表等)。
图形绘制。完成了数据准备工作 ,接下来就是按此数据绘制统计图形。通常又可分为绘制背景、绘
制参照系 、绘制图例、绘制主体等。
调用显示。完成绘制过程后 ,就可以将绘制好的统计图形返 回给调用页面,显示于合适的位置。
Web应用程序 中绘制统计图的总思路是相 同的,但各种常用统计 图的具体实现又有区别 :折线图
主要应用描点与绘制线段的方法实现,直方图则主要应用矩形的绘制与填充 ,而圆饼图则要用到扇形的
绘制与填充 ,柱状统计图要应用矩形和多边形的绘制与填充,饼状统计 图要用到扇形与椭圆扇形的绘制
与填充。
下面就按上述思路 ,分别以柱状统计 图和饼状统计图为例 ,结合 Visual c#.NET与 Oracle数据库来
阐述统计 图实现的关键技术和具体步骤。
3 应用 GDI+实现 统计 图绘制的关键技 术和具体 步骤
3.1 准 备工作
(1)建立 Web应用程序。在 Microsoft Visual Studio.NET中,新建一个 Visual C#项 目,在该项 目下
创建一个 ASP.NET应用程序 ,命名为WebCharts,设定起始页名称为 Default.aspx。
(2)在该应用程序中,新建名为 Chart.aspx的web窗体页。在 Chart.aspx.CS页中添加如下代码 :
using System.Data.OleDb; //.NET 数据提供程序 ,描述用于访问数据源的类的集合 。
using System.Drawing; //提供对 GDI+ 基本 图形功能的访问。
using System.Drawing.Imaging; //提供高级的 GDI+ 图像处理功能。
3.2 绘 制柱 状统计 图的关 键步 骤
3.2.1 数 据 准备
(1)与 Oracle数据库的连接
维普资讯 http://www.cqvip.com
第 3期 罗少锋等 WEB系统 中统计图绘制研究 21
string connstr=”Provider=MSDAORA.1;Password=密码 ;User ID=用户名 ;Data Source=数据源”;
OleDbConnection Conn=new OleDbConnection(connstr);
(2)从数据库 中检索所需的数据并存人驻 留内存 的数据集(DataSet)
OleDbDataAdapter adpt=new OleDbDataAdapter(”Orale中的 SQL命令”,Conn);
DataSet pSet=new DataSet();
adpt.Fill(pSet);
(3)处理驻留内存 的数据 ,存人排序列表(SortedList)
SortedList pList=new SortedList();
for(int i=O;i<pSet.Tables[0].Rows.Count;i++)
{ double dcount=(double.Parse(pSet.Tables[0].Rows[i][”数量”].ToString()));
pList.Add(pSet.Tables[0].Rows[i][”种类”].ToString(),dcount);
}
3.2.2 图形绘 制
(1)初始化
int H=300,W=420; //H、W为输 出图形 的高度、宽度
int th=H一100,tw=W 2/3; //内部主体图形的高度、宽度
int Z=20,S=20; //内部主体图形距左边和上边的距离
int Y=Z+tw+1O,X=S+th; //内部主体图形距右边和下边的距离
Bitmap newBmp=new Bitmap(W,H,PixelFormat.Format32bppArgb); //创建一个位图对象
Graphics g=Graphics.FromImage(newBmp); //声 明一个图形对象 ,在上面创建的位图上画图
g.Clear(Color.White); //清除整个绘图面并以白色填充背景
(2)绘制坐标系
g.DrawLine(bpen,new Point(Z一2,S+5),new Point(Z,S)); //绘制一段直线 ,bpen为 已定义的
钢笔
g.DrawString(tmp,new Font(”宋体”,9),Brushes.Black,new PointF(Z+5,i一5));//标参照高度,
tmp为要绘制 的字符 串
(3)绘制柱体和图例并标示
foreach(DictionaryEntry entry in pList)
{
//用伪随机函数随机生成颜色 ,并以此颜色定义笔刷
Random md=new Random();
int R=(int)(md.NextDouble() 255);
int G=(int)(md.NextDouble() 255);
int B=(int)(md.NextDouble() 255);
Brush bru=new SolidBrush(Color.FromArgb(R,G,B));
//绘制图例
g.FillRectangle(bru,Y,flag,10,10); //填充矩形 ,flag为要绘制 图例左上顶点纵坐标
string tmp=string.Fo~at(”{0}:{1: .#}'',entry.Key,(decima1)entry.Value);
g.DrawString(tmp,new Font(”宋体 ”,9),Brushes.Black,new PointF(Y+13,flag)); //标示 图
例 意义
//计算柱体在参照系中的高度 height(略)
//填充柱体正面(其 中start为该柱体左上顶点横坐标 ,permwidth为柱体正面宽度)
g.FillRectangle(bru,start,X—height,permwidth,height);
维普资讯 http://www.cqvip.com
22 后 勤 工 程 堂 院 堂 报 QQ璺
//填充柱体顶侧面(其中 ew为柱体侧面宽度,dw为顶面高度)
PointF[]ZMPoints={new PointF((float)(start),(float)(x—height)),
new PointF((float)(start+ew),(float)(X—height—dw)),
new PointF((float)(start+ew+permwidth),(float)(X—height—dw)),
new PointF((float)(start+permwidth),(float)(X—height)),};
g.FiUPolygon(bru,ZMPoints);
//填充柱体右侧面(类似顶侧面,略)
//绘制三面相交的棱(略)
//绘制柱体所代表 的实际数量及种类(略)
}
3.2.3 调 用 显 示
(1)将绘制好的图形在内存中存为.gif格式图片 ,供外部程序调用
newBmp.Save(Response.OutputStream,System.Drawing.Imaging.ImageFormat.Gif);
(2)在起始页Default.aspx的 HTML代码中加入如下代码段 ,调用上面生成 的图片
<img SrC=”Chart.aspx”>
绘制 的柱状统计 图示例如图 1所示。至此 ,已完成 了柱状统计 图的整个绘制过程 。饼状统计 图的
绘制过程与柱状统计 图类似 ,有了上述基础 ,下面仅简要阐述其不同之处 。
3.3 绘 制饼状 统计 图的关 键步 骤
3.3.1 数据 准备
(1)、(2)参 见“3.2.1”。
(3)与3.2.1中不同之处:存人排序列表(SortedList)中的数据不是数据库中的原数据 ,而是转化为
每个种类所对应的百分 比小数。
3.3.2 图形绘制
(1)初始化
int H=260,W=400; //H、W为输出图形的高度 、宽度
int th=150,tw=130; //内部主体图形的高度、宽度
int YX_ x=50,Yx-y=50; //圆心坐标
(2)绘制主体和图例
foreaeh(DietionaryEntry entry in pList)
{
//用伪随机函数随机生成颜色 ,并以此颜色定义笔刷(略)
//绘制图例(略)
g.FiUPie(bru,new Rectangle(YX_x,YX ,th,tw),start,(int)((double)(entry.Value)}3.6));
g.DrawPie(bpen,new Rectangle(YX—X,YX—Y,th,tw),start,(int)((double)(entry.Value)}
3.6));
start+=(int)((double)(entry.Value)}3.6);//下次绘制起始角度
count+ + :
}
3.3.3 调用显示(参见3.2.3)
绘制的饼状统计 图示例见图2。