asp.net 画数据图表

淩亂°似流年 2022-04-10 08:06 187阅读 0赞

引用：[http://www.cnblogs.com/starboy1413/articles/265977.html][http_www.cnblogs.com_starboy1413_articles_265977.html]

[http://tech.ddvip.com/2006-08/11567502458524.html][http_tech.ddvip.com_2006-08_11567502458524.html]

我们知道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"类来实现的，下列语句可以创建一个位图对象：

<table> 
 <tbody> 
  <tr> 
   <td> <pre>//创建一个"Bitmap"对象<br>Bitmap image = new Bitmap ( 400 , 400 ) ;</pre> </td> 
  </tr> 
 </tbody> 
</table>

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

<table> 
 <tbody> 
  <tr> 
   <td> <pre>//以"Jpeg"格式保存此图片对象，在客户端显示出来<br>image . Save ( Response . OutputStream , ImageFormat . Jpeg ); </pre> </td> 
  </tr> 
 </tbody> 
</table>

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

<table> 
 <tbody> 
  <tr> 
   <td> <pre>//以"Jpeg"格式保存此图片对象，在客户端显示出来<br>image . Save ( Response . OutputStream , ImageFormat . Gif ) ;</pre> </td> 
  </tr> 
 </tbody> 
</table>

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

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

<table style="width:600px;"> 
 <tbody> 
  <tr> 
   <td><img src="http://www.yesky.com/20020627/jt-2002-6-27-image002.jpg" alt="" width="554" height="415"><br>　　　　　　　　图01：利用ASP.NET动态创建图片</td> 
  </tr> 
 </tbody> 
</table>

产生的是一个黑色的图片，很不美观，下面就来给此图片上色，并且在此图片上面画线、写字等。  
  
（2）.如何给产生得图片上色：  
  
　　其实给产生得图片上色是比较容易的，首先根据"Bitmap"对象创建一个"Graphic"对象，然后根据此"Graphic"对象的方法来确定上色的图形类型（譬如显示的图片为椭圆、正方形等）。下面代码（chart4.aspx）的作用就是给chart3.aspx代码产生的图片上淡绿色：

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

<table style="width:600px;"> 
 <tbody> 
  <tr> 
   <td><img src="http://www.yesky.com/20020627/jt-2002-6-27-image004.jpg" alt="" width="554" height="415"><br>　　　　　　　 图02：给产生的图片上色</td> 
  </tr> 
 </tbody> 
</table>

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

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

<table style="width:600px;"> 
 <tbody> 
  <tr> 
   <td><img src="http://www.yesky.com/20020627/jt-2002-6-27-image006.jpg" alt="" width="554" height="415"><br>　　　　　　　　图03：定制图片的形状</td> 
  </tr> 
 </tbody> 
</table>

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

（3）.如何在图片上实现画线和写字：  
  
　　在图片上写字是通过产生的"Graphic"对象的DrawString ( )方法来实现的，在调用此方法前，必须设置字体和刷子，具体调用方法是：

<table> 
 <tbody> 
  <tr> 
   <td> <pre>public void DrawString ( <br>string s ,<br>Font font ,<br>Brush brush ,<br>float x ,<br>float y<br>) ;</pre> </td> 
  </tr> 
 </tbody> 
</table>

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

<table> 
 <tbody> 
  <tr> 
   <td> <pre>Font axesFont = new Font ( "arial" , 10 ) ;<br>Brush blackBrush = new SolidBrush ( Color . Red ) ;<br>g . DrawString ( "在图片上面写入文字，呵呵" , axesFont , blackBrush , 90 , 20 ) ; </pre> </td> 
  </tr> 
 </tbody> 
</table>

要在图片上画线要使用到"Graphic"对象的DrawLine ( )方法，具体的使用语法如下：

<table> 
 <tbody> 
  <tr> 
   <td> <pre>public void DrawLines (<br>Pen pen ,<br>Point [ ] points<br>) ;</pre> </td> 
  </tr> 
 </tbody> 
</table>

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

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

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

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

<table style="width:600px;"> 
 <tbody> 
  <tr> 
   <td><img src="http://www.yesky.com/20020627/jt-2002-6-27-image008.jpg" alt="" width="554" height="415"><br>　　　　　　　　图04：在图片上完成画线、写字和上色</td> 
  </tr> 
 </tbody> 
</table>

**三．在ASP.NET中实现数据图表的完整源代码和运行界面：**  
  
　　在掌握了产生图片，在给图片上色、在图片上输出字符、和画线等基本操作过以后，充分的利用各种基本操作，就可以得的在ASP.NET中实现数据图表的完整程序，下图是运行界面：  
  
图05：在ASP.NET中实现数据图表的运行界面  
  
　　下面是在ASP.NET中实现数据图表的完整代码（chart1.aspx），如下：

<table> 
 <tbody> 
  <tr> 
   <td> <pre>＜%@ Import Namespace = "System" %＞<br>＜%@ Import Namespace = "System.Drawing" %＞<br>＜%@ Import Namespace = "System.Drawing.Drawing2D" %＞<br>＜%@ Import Namespace = "System.Drawing.Imaging" %＞ <br>＜script language = "C#" runat = "server" ＞<br><br>class LineChart<br>{
       <br>public Bitmap b ;<br>public string Title = "在ASP.NET中实现数据图表" ;<br>public ArrayList chartValues = new ArrayList ( ) ;<br>public float Xorigin = 0 , Yorigin = 0 ;<br>public float ScaleX , ScaleY ;<br>public float Xdivs = 2 , Ydivs = 2 ;<br><br>private int Width , Height ;<br>private Graphics g ;<br>private Page p ;<br><br>struct datapoint {
       <br>public float x ;<br>public float y ;<br>public bool valid ;<br>}<br><br>//初始化<br>public LineChart ( int myWidth , int myHeight , Page myPage ) {
       <br>Width = myWidth ; Height = myHeight ;<br>ScaleX = myWidth ; ScaleY = myHeight ;<br>b = new Bitmap ( myWidth , myHeight ) ;<br>g = Graphics . FromImage ( b ) ;<br>p = myPage ;<br>}<br><br>public void AddValue ( int x , int y ) {
       <br>datapoint myPoint ;<br>myPoint . x = x ;<br>myPoint . y = y ;<br>myPoint . valid = true ;<br>chartValues . Add ( myPoint ) ;<br>}<br><br>public void Draw ( ) {
       <br>int i ;<br>float x , y , x0 , y0 ;<br>string myLabel ;<br>Pen blackPen = new Pen ( Color . Blue , 2 ) ;<br>Brush blackBrush = new SolidBrush ( Color . Black ) ;<br>Font axesFont = new Font ( "arial" , 10 ) ;<br><br>//首先要创建图片的大小<br>p . Response . ContentType = "image/jpeg" ;<br>g . FillRectangle ( new SolidBrush ( Color . LightGreen ) , 0 , 0 , Width , Height ) ;<br>int ChartInset = 50 ;<br>int ChartWidth = Width - ( 2 * ChartInset ) ;<br>int ChartHeight = Height - ( 2 * ChartInset ) ;<br>g . DrawRectangle ( new Pen ( Color . Black , 1 ) , ChartInset , ChartInset , ChartWidth , ChartHeight ) ;<br>//写出图片上面的图片内容文字<br>g . DrawString ( Title , new Font ( "arial" , 14 ) , blackBrush , Width / 3 , 10 ) ;<br>//沿X坐标写入X标签<br>for ( i = 0 ; i ＜= Xdivs ; i++ ) {
       <br>x = ChartInset + ( i * ChartWidth ) / Xdivs ;<br>y = ChartHeight + ChartInset ;<br>myLabel = ( Xorigin + ( ScaleX * i / Xdivs ) ) . ToString ( ) ;<br>g . DrawString ( myLabel , axesFont , blackBrush , x - 4 , y + 10 ) ;<br>g . DrawLine ( blackPen , x , y + 2 , x , y - 2 ) ;<br>}<br>//沿Y坐标写入Y标签<br>for ( i = 0 ; i ＜= Ydivs ; i++ )<br>{
       <br>x = ChartInset ;<br>y = ChartHeight + ChartInset - ( i * ChartHeight / Ydivs ) ;<br>myLabel = ( Yorigin + ( ScaleY * i / Ydivs ) ) . ToString ( ) ;<br>g . DrawString ( myLabel , axesFont , blackBrush , 5 , y - 6 ) ;<br>g . DrawLine ( blackPen , x + 2 , y , x - 2 , y ) ;<br>}<br>g . RotateTransform ( 180 ) ;<br>g . TranslateTransform ( 0 , - Height ) ;<br>g . TranslateTransform ( - ChartInset , ChartInset ) ;<br>g . ScaleTransform ( - 1 , 1 ) ;<br><br>//画出图表中的数据<br>datapoint prevPoint = new datapoint ( ) ;<br>prevPoint . valid = false ;<br>foreach ( datapoint myPoint in chartValues ) {
       <br>if ( prevPoint . valid == true ) {
       <br>x0 = ChartWidth * ( prevPoint . x - Xorigin ) / ScaleX ;<br>y0 = ChartHeight * ( prevPoint . y - Yorigin ) / ScaleY ;<br>x = ChartWidth * ( myPoint . x - Xorigin ) / ScaleX ;<br>y = ChartHeight * ( myPoint . y - Yorigin ) / ScaleY ;<br>g . DrawLine ( blackPen , x0 , y0 , x , y ) ;<br>g . FillEllipse ( blackBrush , x0 - 2 , y0 - 2 , 4 , 4 ) ;<br>g . FillEllipse ( blackBrush , x - 2 , y - 2 , 4 , 4 ) ;<br>}<br>prevPoint = myPoint ;<br>}<br><br>//最后以图片形式来浏览<br>b . Save ( p . Response . OutputStream , ImageFormat . Jpeg ) ;<br>}<br><br>~LineChart ( ) {
       <br>g . Dispose ( ) ;<br>b . Dispose ( ) ;<br>}<br>}<br>void Page_Load ( Object sender , EventArgs e ) <br>{
       <br>LineChart c = new LineChart ( 640 , 480 , Page ) ;<br>c . Title = " 在ASP.NET中实现数据图表" ;<br>c . Xorigin = 0 ; c . ScaleX = 500 ; c . Xdivs = 5 ;<br>c . Yorigin = 0 ; c . ScaleY = 1000 ; c . Ydivs = 5 ;<br>c . AddValue ( 0 , 150 ) ;<br>c . AddValue ( 50 , 50 ) ;<br>c . AddValue ( 100 , 700 ) ;<br>c . AddValue ( 200 , 150 ) ;<br>c . AddValue ( 300 , 450 ) ;<br>c . AddValue ( 400 , 75 ) ;<br>c . AddValue ( 450 , 450 ) ;<br>c . AddValue ( 500 , 250 ) ;<br>c . Draw ( ) ;<br>}<br>＜/script ＞</pre> </td> 
  </tr> 
 </tbody> 
</table>

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

[http_www.cnblogs.com_starboy1413_articles_265977.html]: http://www.cnblogs.com/starboy1413/articles/265977.html
[http_tech.ddvip.com_2006-08_11567502458524.html]: http://tech.ddvip.com/2006-08/11567502458524.html