`

ASP.NET实现数据图表

阅读更多

作者:马金虎  来自:yesky

在ASP中插入图表,常用的方法是使用MSChart控件。那么在ASP.NET是否也是这样呢?答案是不可以的。

  我们知道ASP.NET是一种编译语言,当客户端第一次调用ASP.NET页面的时候,其实是经过了一种比较复杂的编译过程,编译生产MSIL文件,存储到本地机,MSIL文件其实是一个中间语言的文件,然后此文件又通过JIT(Just in time)编译器进行再编译,生成机器语言,这样你所调用的ASP.NET页面才展现出来,对于不同的机器,有着不同的JIT,也就被编译成不同机器语言,这就是微软公司大力鼓吹ASP.NET的所谓跨平台的原理。

  当ASP.NET页面被编译成MSIL文件的时候,编译所使用的类库必须是受管代码文件(Managed Code),而ActiveX控件是已经被编译成机器语言的文件,他属于非受管代码文件(Unmanaged Code)。所以直接在ASP.NET调用MSChart组件是不可能的。虽然你可以利用.Net框架提供的工具把此MSChart组件转换成受管代码文件,但这个过程相对比较复杂,并且利用这种方法产生的图表速度相当慢,还有就是由MSChart组件自身所限制,对于复杂的图表,是无法利用他来生成的。

  本文将以股市的行情图表为例,介绍如何在ASP.NET中实现图表。其实我们看到的行情图并不是一个图表,而是一个图片。在服务器端产生图片,然后在图片上面画出想要显示给用户的各种信息,然后通过浏览器发送图片到客户端,从而形成图表,这就是本文要探讨的方法。这种方法虽然实现起来比较复杂,但操作灵活,非常实用,尤其适用于互联网上的图表,下面就来介绍具体的实现方法。

  一.本文中介绍的程序设计及运行环境

  (1).微软视窗2000 服务器版

  (2)..Net Framework SDK Beta 2以上版本

  二.在ASP.NET中实现数据图表的关键步骤以及解决方法:

  在ASP.NET页面中画出图表的关键步骤主要有两步,其一,创建一个图片对象(Bitmap)。然后利用.Net FrameWork SDK所提供的方法在此图片对象上面画出自己想要的图形,譬如画线,画点等。其二,就是为了更适合传输,把此图片对象,以"Jpeg"格式保存,并显示出来。下面我们就来看看这二步的具体实现方法。

  (1).首先我们来看看如何在ASP.NET页面创建一个动态图片,并显示出来。

  创建一个图片对象其实非常容易的,利用命名空间"System.drawing"中的"Bitmap"类来实现的,下列语句可以创建一个位图对象:

//创建一个"Bitmap"对象
Bitmap image = new Bitmap ( 400 , 400 ) ;

  修改"Bitmap"对象的二个参数来改变创建的位图对象的长和宽。通过Bitmap类的Save方法就可以显示已经创建的位图对象。由于位图文件要占用很多的空间,为了便于网络传输,一般转换成"Jpeg"或者"Gif"文件来保持。下面语句是把已经创建的位图对象,转换成"Jpeg"文件显示:

//以"Jpeg"格式保存此图片对象,在客户端显示出来
image . Save ( Response . OutputStream , ImageFormat . Jpeg );

  稍加修改,就可以把位图对象以"Gif"文件来显示,具体如下:

//以"Jpeg"格式保存此图片对象,在客户端显示出来
image . Save ( Response . OutputStream , ImageFormat . Gif ) ;

  下面代码(chart3.aspx)的作用就是ASP.NET动态创建一个图片并显示出来:

<%@ Page Language = "C#" ContentType = "image/jpeg" %> 
<%@ Import Namespace = "System" %>
<%@ Import Namespace = "System.Drawing" %>
<%@ Import Namespace = "System.Drawing.Drawing2D" %>
<%@ Import Namespace = "System.Drawing.Imaging" %>
<html >
<head >
<script language = "C#" runat = "server" >
void Page_Load ( object sender , EventArgs e )
{
//创建一个"Bitmap"对象
Bitmap image = new Bitmap ( 400 , 400 ) ;
//以"Jpeg"格式保存此图片对象,在客户端显示出来
image . Save ( Response . OutputStream , ImageFormat . Jpeg ) ;
}
</script >
</head >
<body >
</body >
</html >

  下面是此代码运行后的界面:


        图01:利用ASP.NET动态创建图片

  产生的是一个黑色的图片,很不美观,下面就来给此图片上色,并且在此图片上面画线、写字等。

(2).如何给产生得图片上色:

  其实给产生得图片上色是比较容易的,首先根据"Bitmap"对象创建一个"Graphic"对象,然后根据此"Graphic"对象的方法来确定上色的图形类型(譬如显示的图片为椭圆、正方形等)。下面代码(chart4.aspx)的作用就是给chart3.aspx代码产生的图片上淡绿色:

<%@ Page Language = "C#" ContentType = "image/jpeg" %> 
<%@ Import Namespace = "System" %>
<%@ Import Namespace = "System.Drawing" %>
<%@ Import Namespace = "System.Drawing.Drawing2D" %>
<%@ Import Namespace = "System.Drawing.Imaging" %>
<html >
<head >
<script language = "C#" runat = "server" >
void Page_Load ( object sender , EventArgs e )
{
//创建一个"Bitmap"对象
Bitmap image = new Bitmap ( 400 , 400 ) ;
Graphics g = Graphics . FromImage ( image ) ;
g . FillRectangle ( new SolidBrush ( Color . LightGreen ) , 0 , 0 , 400 , 400 ) ;
//以"Jpeg"格式保存此图片对象,在客户端显示出来
image . Save ( Response . OutputStream , ImageFormat . Jpeg ) ;
}
</script >
</head >
<body >
</body >
</html >

  下图是chart4.aspx运行的界面:


        图02:给产生的图片上色


  当然你不仅可以定制所产生的图片颜色,还可以定制产生的图片的形状,下面代码段的功能就是定制图片的形状为椭圆:

<%@ Page Language = "C#" ContentType = "image/jpeg" %> 
<%@ Import Namespace = "System" %>
<%@ Import Namespace = "System.Drawing" %>
<%@ Import Namespace = "System.Drawing.Drawing2D" %>
<%@ Import Namespace = "System.Drawing.Imaging" %>
<html >
<head >
<script language = "C#" runat = "server" >
void Page_Load ( object sender , EventArgs e )
{
//创建一个"Bitmap"对象
Bitmap image = new Bitmap ( 400 , 400 ) ;
Graphics g = Graphics . FromImage ( image ) ;
g . FillRectangle ( new SolidBrush ( Color . LightGreen ) , 0 , 0 , 400 , 400 ) ;
//以"Jpeg"格式保存此图片对象,在客户端显示出来
image . Save ( Response . OutputStream , ImageFormat . Jpeg ) ;
}
</script >
</head >
<body >
</body >
</html >

  下图是此代码的运行界面:


        图03:定制图片的形状

  当然还可以使用"Graphic"对象的其他方法把图片定制成其他形状,这就不一一介绍了。

(3).如何在图片上实现画线和写字:

  在图片上写字是通过产生的"Graphic"对象的DrawString ( )方法来实现的,在调用此方法前,必须设置字体和刷子,具体调用方法是:

public void DrawString ( 
string s ,
Font font ,
Brush brush ,
float x ,
float y
) ;

"s"是要输出的字符串,"font"是字符串的字体,"brush"是定义刷子,后面二个参数是产生字符串的位置坐标。在程序中产生字符串的具体语句如下:

Font axesFont = new Font ( "arial" , 10 ) ;
Brush blackBrush = new SolidBrush ( Color . Red ) ;
g . DrawString ( "在图片上面写入文字,呵呵" , axesFont , blackBrush , 90 , 20 ) ;
 
  要在图片上画线要使用到"Graphic"对象的DrawLine ( )方法,具体的使用语法如下:

public void DrawLines (
Pen pen ,
Point [ ] points
) ;

  其中"points"是定义点的位置,当然你也可以使用本文中使用的方法来调用,就是定义每画一道线,这样我感觉更方法些。下面是在产生的图片上画出三条线:

Pen redPen = new Pen ( Color . Red , 1 ) ;
Pen blackPen = new Pen ( Color . Blue , 2 ) ;
//以下语句是在此图片对象上画出各种线条,可以定义线条的粗细、起点、终点等
g . DrawLine ( blackPen , 0 , 2 , 210 , 250 ) ;
g . DrawLine ( blackPen , 210 , 250 , 310 , 50 ) ;
g . DrawLine ( redPen , 310 , 50 , 210 , 350 ) ;

  知道了这些基本知识,在定制图片形状,给图片上色,在图片上写字、画线就显得比较容易了,下面代码(chart2.aspx)的功能就是定制一个正方形图片,并在图片上画线、写字、上色,具体如下:

<%@ Page Language = "C#" ContentType = "image/jpeg" %> 
<%@ Import Namespace = "System" %>
<%@ Import Namespace = "System.Drawing" %>
<%@ Import Namespace = "System.Drawing.Drawing2D" %>
<%@ Import Namespace = "System.Drawing.Imaging" %>
<html >
<head >
<script language = "C#" runat = "server" >
void Page_Load ( object sender , EventArgs e )
{
Bitmap image = new Bitmap ( 400 , 400 ) ;
Font axesFont = new Font ( "arial" , 10 ) ;
Brush blackBrush = new SolidBrush ( Color . Red ) ;
Pen redPen = new Pen ( Color . Red , 1 ) ;
Pen blackPen = new Pen ( Color . Blue , 2 ) ;
Graphics g = Graphics . FromImage ( image ) ;
g . Clear ( Color . White ) ;
g . FillRectangle ( new SolidBrush ( Color . LightGreen ) , 0 , 0 , 400 , 400 ) ;
//在此图片对象中画出图片,可以定义文字大小、位置、色彩等
g . DrawString ( "在图片上面写入文字,呵呵" , axesFont , blackBrush , 90 , 20 ) ;
//以下语句是在此图片对象上画出各种线条,可以定义线条的粗细、起点、终点等
g . DrawLine ( blackPen , 0 , 2 , 210 , 250 ) ;
g . DrawLine ( blackPen , 210 , 250 , 310 , 50 ) ;
g . DrawLine ( redPen , 310 , 50 , 210 , 350 ) ;
//以"Jpeg"格式保存此图片对象,在客户端显示出来
// image . Save ( Response . OutputStream , ImageFormat . Jpeg ) ;
image . Save ( Response . OutputStream , ImageFormat . Jpeg ) ;
}
</script >
</head >
<body >
</body >
</html >


        图04:在图片上完成画线、写字和上色

三.在ASP.NET中实现数据图表的完整源代码和运行界面:

  在掌握了产生图片,在给图片上色、在图片上输出字符、和画线等基本操作过以后,充分的利用各种基本操作,就可以得的在ASP.NET中实现数据图表的完整程序,下图是运行界面:

图05:在ASP.NET中实现数据图表的运行界面

  下面是在ASP.NET中实现数据图表的完整代码(chart1.aspx),如下:

<%@ Import Namespace = "System" %>
<%@ Import Namespace = "System.Drawing" %>
<%@ Import Namespace = "System.Drawing.Drawing2D" %>
<%@ Import Namespace = "System.Drawing.Imaging" %>
<script language = "C#" runat = "server" >

class LineChart
{
public Bitmap b ;
public string Title = "在ASP.NET中实现数据图表" ;
public ArrayList chartValues = new ArrayList ( ) ;
public float Xorigin = 0 , Yorigin = 0 ;
public float ScaleX , ScaleY ;
public float Xdivs = 2 , Ydivs = 2 ;

private int Width , Height ;
private Graphics g ;
private Page p ;

struct datapoint {
public float x ;
public float y ;
public bool valid ;
}

//初始化
public LineChart ( int myWidth , int myHeight , Page myPage ) {
Width = myWidth ; Height = myHeight ;
ScaleX = myWidth ; ScaleY = myHeight ;
b = new Bitmap ( myWidth , myHeight ) ;
g = Graphics . FromImage ( b ) ;
p = myPage ;
}

public void AddValue ( int x , int y ) {
datapoint myPoint ;
myPoint . x = x ;
myPoint . y = y ;
myPoint . valid = true ;
chartValues . Add ( myPoint ) ;
}

public void Draw ( ) {
int i ;
float x , y , x0 , y0 ;
string myLabel ;
Pen blackPen = new Pen ( Color . Blue , 2 ) ;
Brush blackBrush = new SolidBrush ( Color . Black ) ;
Font axesFont = new Font ( "arial" , 10 ) ;

//首先要创建图片的大小
p . Response . ContentType = "image/jpeg" ;
g . FillRectangle ( new SolidBrush ( Color . LightGreen ) , 0 , 0 , Width , Height ) ;
int ChartInset = 50 ;
int ChartWidth = Width - ( 2 * ChartInset ) ;
int ChartHeight = Height - ( 2 * ChartInset ) ;
g . DrawRectangle ( new Pen ( Color . Black , 1 ) , ChartInset , ChartInset , ChartWidth , ChartHeight ) ;
//写出图片上面的图片内容文字
g . DrawString ( Title , new Font ( "arial" , 14 ) , blackBrush , Width / 3 , 10 ) ;
//沿X坐标写入X标签
for ( i = 0 ; i <= Xdivs ; i++ ) {
x = ChartInset + ( i * ChartWidth ) / Xdivs ;
y = ChartHeight + ChartInset ;
myLabel = ( Xorigin + ( ScaleX * i / Xdivs ) ) . ToString ( ) ;
g . DrawString ( myLabel , axesFont , blackBrush , x - 4 , y + 10 ) ;
g . DrawLine ( blackPen , x , y + 2 , x , y - 2 ) ;
}
//沿Y坐标写入Y标签
for ( i = 0 ; i <= Ydivs ; i++ )
{
x = ChartInset ;
y = ChartHeight + ChartInset - ( i * ChartHeight / Ydivs ) ;
myLabel = ( Yorigin + ( ScaleY * i / Ydivs ) ) . ToString ( ) ;
g . DrawString ( myLabel , axesFont , blackBrush , 5 , y - 6 ) ;
g . DrawLine ( blackPen , x + 2 , y , x - 2 , y ) ;
}
g . RotateTransform ( 180 ) ;
g . TranslateTransform ( 0 , - Height ) ;
g . TranslateTransform ( - ChartInset , ChartInset ) ;
g . ScaleTransform ( - 1 , 1 ) ;

//画出图表中的数据
datapoint prevPoint = new datapoint ( ) ;
prevPoint . valid = false ;
foreach ( datapoint myPoint in chartValues ) {
if ( prevPoint . valid == true ) {
x0 = ChartWidth * ( prevPoint . x - Xorigin ) / ScaleX ;
y0 = ChartHeight * ( prevPoint . y - Yorigin ) / ScaleY ;
x = ChartWidth * ( myPoint . x - Xorigin ) / ScaleX ;
y = ChartHeight * ( myPoint . y - Yorigin ) / ScaleY ;
g . DrawLine ( blackPen , x0 , y0 , x , y ) ;
g . FillEllipse ( blackBrush , x0 - 2 , y0 - 2 , 4 , 4 ) ;
g . FillEllipse ( blackBrush , x - 2 , y - 2 , 4 , 4 ) ;
}
prevPoint = myPoint ;
}

//最后以图片形式来浏览
b . Save ( p . Response . OutputStream , ImageFormat . Jpeg ) ;
}

~LineChart ( ) {
g . Dispose ( ) ;
b . Dispose ( ) ;
}
}
void Page_Load ( Object sender , EventArgs e )
{
LineChart c = new LineChart ( 640 , 480 , Page ) ;
c . Title = " 在ASP.NET中实现数据图表" ;
c . Xorigin = 0 ; c . ScaleX = 500 ; c . Xdivs = 5 ;
c . Yorigin = 0 ; c . ScaleY = 1000 ; c . Ydivs = 5 ;
c . AddValue ( 0 , 150 ) ;
c . AddValue ( 50 , 50 ) ;
c . AddValue ( 100 , 700 ) ;
c . AddValue ( 200 , 150 ) ;
c . AddValue ( 300 , 450 ) ;
c . AddValue ( 400 , 75 ) ;
c . AddValue ( 450 , 450 ) ;
c . AddValue ( 500 , 250 ) ;
c . Draw ( ) ;
}
</script >


  四. 总结:

  实现图表始终是互联网编程的一个难点,本文介绍了在ASP.NET页面中如何实现数据图表,在没有什么好的组件可以利用的前提下,利用.Net FrameWork SDK GDI+中提供的各种用以操作图形的方法,这样的过程虽然有点烦杂,但对实现复杂的图表是非常有用的。希望本文不仅能够帮助读者解决在互联网上的图表问题,也能够对读者的针对GDI+也有所了解。
分享到:
评论

相关推荐

    ASP.NET页面中实现数据棒图

    在我的上一篇文章《在ASP.NET实现数据图表》中已经介绍了在浏览器看到的图表,一般都是图片文件。那么在ASP.NET中是否也可以生成这些图表?答案是肯定的,因为在ASP.NET中拥有了一个新功能--绘图功能,通过此功能就...

    在ASP.NET页面中实现数据棒图

    上一篇文章《在ASP.NET实现数据图表》中已经介绍了在浏览器看到的图表,一般都是图片文件。那么在ASP.NET中是否也可以生成这些图表?答案是肯定的,因为在ASP.NET中拥有了一个新功能--绘图功能,通过此功能 就能够...

    asp.net 图表 c#图表 chart 统计图(c#版含实例)

    asp.net c# 统计图 GoogleChartSharp 含实例

    ASP.Net实现SQL动态绑定Echarts图表Demo完整源码

    使用ASP.Net通过后台一般处理程序获取SQL查询数据转换成Json数据,前端通过Ajax请求与后端数据交互代码内附有注释,有任何问题即可留言

    ASP.NET 生成图表

    ASP.NET 生成图表; ASP.NET 生成图表

    基于ASP.NET数据图表的绘制

    通过具体实例,介绍了在ASP.NET下绘制图表的两种方法:利用GDI+图形库和利用Microsoft Office Web Componets(OWC),并对这两种方法进行了比较

    Asp.net图表控件

    Chartlet是一个免费的ASP.NET使用的图表控件,它让你可以用最少的代码创造出非常漂亮的统计图表,我们的宗旨是让你的使用越简单越好,现在你只需要设置一个属性,绑定一个数据源 就可以轻松创建一个非常漂亮的图表!...

    ASP.NET绑定sql数据库采用echarts显示数据图表(实现了柱状图和饼图).zip

    ASP.NET绑定sql数据库采用echarts显示数据图表,已封装成类文件

    FusionCharts+asp.net+sqlserver生成图表

    正在学习FusionCharts,结合asp.net+sqlserver做的一个小实例,展示如何访问数据库中的数据生成我们所需要的图表

    ASP.NET生成统计图表(饼柱线)

    ASP.NET生成饼图、柱形图、曲线图,使数据更直观 统计更清晰

    Chartlet(Winform版)(ASP.NET版)和MSChart图表控件、生成报表等

    Chartlet是一个为ASP.NET设计的免费的图表控件,用来在ASP.NET页面上将数据库的数据动态转换 成统计图表显示。如今成熟的.net图表控件有很多,但是大多数都是国外的,而且几乎都是收费的, 只适合大型的商业应用,不...

    ASP.NET中实时图表的实现方法分享

    在对大批量的数据进行分析比较时,最常用也是最直观明了的表现方法莫过于绘制趋势图表。一般情况下,我们利用EXCEL制作各种类型的趋势图表,但它们都是基于静态数据的,即数据是事先整理好的而不 是动态生成的。如果...

    UltraWebChart--服务器端-基于ASP.NET的图表控件

    提供了ASP.NET 基于会话的安全性,从而保证了显示的图表数据,使所有敏感图表非常安全。 强大的美学增强 图表不仅仅采用点阵表示,最重要的是数据的外观显示。为了轻松的显示您的图表,UltraWebChart提供了内置的...

    《ASP.NET 4揭秘(卷1)》源码

    本书是享有盛誉的ASP.NET 经典名著,涵盖了ASP.NET 4 的方方面面,包括了所有最新的特性,如图表控件、URL 路由引擎、ADO.NET Entity Framework 的使用和WCF 数据服务等。本书作者StephenWalther 是ASP 界的名人,是...

    ASP.NET柱形图表分析投票结果

    ASP.NET柱形图表分析投票结果,通过SQL语句从数据库中检索出相应的数据,来实现柱形图表

    Echarts_Demo_echarts_DEMO_ASP.NET+ECHART数据图像处理_echartsdemo_

    将数据通过百度Echart工具包实现数据柱状图

    Asp.net(Chart)

    可以免费用在ASP.NET 3.5中,促成基于浏览器的丰富图表场景支持各种丰富的图表选项,包括pie(饼图), area(区域), range(范围), point(点), circular(圆形), accumulation(累积), data distribution(数据...

    asp代码实现生成图表(ASP.NET)

    ASP代码中包含生成excel数据表、生成饼状图表、生成折线图表、生成柱状图表、生成混合图表、通过代码生成图表等代码,下载解压后可直接打开

    亮剑.net图改asp.net网站开发实战源码.rar

     ADO.NET类与断线数据集DataSet剖析,ADO.NET与ASP.NET网页整合应用实例,多层式架构组成探讨,业务逻辑层类设计,类图表的建立与设计说明,ObjectDataSource数据控制项类绑定设计,主版页、HTML元素、CSS与表示层...

Global site tag (gtag.js) - Google Analytics