ASP.NET畫圖全攻略(上)_.Net教程

      編輯Tag賺U幣
      教程Tag:暫無Tag,歡迎添加,賺取U幣!

      推薦:ASP.NET的實時天氣及24小時天氣預報
      修改其中的url獲得其他城市的天氣情況 如廣州為: http://weather.yahoo.com/forecast/CHXX0037_c.html 注意僅適用于獲得yahoo上的天氣預報

      本文代碼是基于Beta2開發

      越來越多的Web應用需要使用圖表來進行數據顯示和分析。例如:投票結果顯示,公司生產情況統計圖顯示分析等等。利用圖表來顯示數據,具有直觀,清晰等優點。

      傳統的ASP技術是不支持畫圖表的,那么就不得不利用Active X或者Java applets來實現這個功能。新近出現的ASP.NET解決了這個問題,只要利用ASP.NET中關于圖形顯示的類,就可以畫出豐富,動態的圖表(如圖1)。本文將要講述如何利用ASP.NET技術結合ADO.NET技術畫條形圖和餅圖。

      首先建立一個c#的類庫。

      打開vs.net,建立一個名為Insight_cs.WebCharts新的類庫工程,將解決方案的名稱改為Insight,將Class.cs文件名改為Insight_cs.WebCharts.cs,最后打開Insight_cs.WebCharts.cs文件。其中代碼如下:

      以下為引用的內容:
      /*自定義類,通過輸入不同的參數,這些類可以畫不同的圖形 */

      using System;
      using System.IO;//用于文件存取
      using System.Data;//用于數據訪問
      using System.Drawing;//提供畫GDI 圖形的基本功能
      using System.Drawing.Text;//提供畫GDI 圖形的高級功能
      using System.Drawing.Drawing2D;//提供畫高級二維,矢量圖形功能
      using System.Drawing.Imaging;//提供畫GDI 圖形的高級功能
      namespace Insight_cs.WebCharts
      {
      public class PieChart
      {
      public PieChart()
      {
      }
      public void Render(string title, string subTitle, int width, int height, DataSet chartData, Stream target)
      {
      const int SIDE_LENGTH = 400;
      const int PIE_DIAMETER = 200;
      DataTable dt = chartData.Tables[0];

      file://通過輸入參數,取得餅圖中的總基數
      float sumData = 0;
      foreach(DataRow dr in dt.Rows)
      {
      sumData = Convert.ToSingle(dr[1]);
      }
      file://產生一個image對象,并由此產生一個Graphics對象
      Bitmap bm = new Bitmap(width,height);
      Graphics g = Graphics.FromImage(bm);
      file://設置對象g的屬性
      g.ScaleTransform((Convert.ToSingle(width))/SIDE_LENGTH,(Convert.ToSingle(height))/SIDE_LENGTH);
      g.SmoothingMode = SmoothingMode.Default;
      g.TextRenderingHint = TextRenderingHint.AntiAlias;

      file://畫布和邊的設定
      g.Clear(Color.White);
      g.DrawRectangle(Pens.Black,0,0,SIDE_LENGTH-1,SIDE_LENGTH-1);
      file://畫餅圖標題
      g.DrawString(title,new Font("Tahoma",24),Brushes.Black,new PointF(5,5));
      file://畫餅圖的圖例
      g.DrawString(subTitle,new Font("Tahoma",14),Brushes.Black,new PointF(7,35));
      file://畫餅圖
      float curAngle = 0;
      float totalAngle = 0;
      for(int i=0;i<dt.Rows.Count;i )
      {
      curAngle = Convert.ToSingle(dt.Rows[i][1]) / sumData * 360;

      g.FillPie(new SolidBrush(ChartUtil.GetChartItemColor(i)),100,65,PIE_DIAMETER,PIE_DIAMETER,totalAngle,curAngle);
      g.DrawPie(Pens.Black,100,65,PIE_DIAMETER,PIE_DIAMETER,totalAngle,curAngle);
      totalAngle = curAngle;
      }
      file://畫圖例框及其文字
      g.DrawRectangle(Pens.Black,200,300,199,99);
      g.DrawString("Legend",new Font("Tahoma",12,FontStyle.Bold),Brushes.Black,new PointF(200,300));

      file://畫圖例各項
      PointF boxOrigin = new PointF(210,330);
      PointF textOrigin = new PointF(235,326);
      float percent = 0;
      for(int i=0;i<dt.Rows.Count;i )
      {
      g.FillRectangle(new SolidBrush(ChartUtil.GetChartItemColor(i)),boxOrigin.X,boxOrigin.Y,20,10);
      g.DrawRectangle(Pens.Black,boxOrigin.X,boxOrigin.Y,20,10);
      percent = Convert.ToSingle(dt.Rows[i][1]) / sumData * 100;
      g.DrawString(dt.Rows[i][0].ToString() " - " dt.Rows[i][1].ToString() " (" percent.ToString("0") "%)",new Font("Tahoma",10),Brushes.Black,textOrigin);
      boxOrigin.Y = 15;
      textOrigin.Y = 15;
      }
      file://通過Response.OutputStream,將圖形的內容發送到瀏覽器
      bm.Save(target, ImageFormat.Gif);
      file://回收資源
      bm.Dispose();
      g.Dispose();
      }
      }

      file://畫條形圖
      public class BarChart
      {
      public BarChart()
      {
      }
      public void Render(string title, string subTitle, int width, int height, DataSet chartData, Stream target)
      {
      const int SIDE_LENGTH = 400;
      const int CHART_TOP = 75;
      const int CHART_HEIGHT = 200;
      const int CHART_LEFT = 50;
      const int CHART_WIDTH = 300;
      DataTable dt = chartData.Tables[0];

      file://計算最高的點
      float highPoint = 0;
      foreach(DataRow dr in dt.Rows)
      {
      if(highPoint<Convert.ToSingle(dr[1]))
      {
      highPoint = Convert.ToSingle(dr[1]);
      }
      }
      file://建立一個Graphics對象實例
      Bitmap bm = new Bitmap(width,height);
      Graphics g = Graphics.FromImage(bm);
      file://設置條圖圖形和文字屬性
      g.ScaleTransform((Convert.ToSingle(width))/SIDE_LENGTH,(Convert.ToSingle(height))/SIDE_LENGTH);
      g.SmoothingMode = SmoothingMode.Default;
      g.TextRenderingHint = TextRenderingHint.AntiAlias;

      file://設定畫布和邊
      g.Clear(Color.White);
      g.DrawRectangle(Pens.Black,0,0,SIDE_LENGTH-1,SIDE_LENGTH-1);
      file://畫大標題
      g.DrawString(title,new Font("Tahoma",24),Brushes.Black,new PointF(5,5));
      file://畫小標題
      g.DrawString(subTitle,new Font("Tahoma",14),Brushes.Black,new PointF(7,35));
      file://畫條形圖
      float barWidth = CHART_WIDTH / (dt.Rows.Count * 2);
      PointF barOrigin = new PointF(CHART_LEFT (barWidth / 2),0);
      float barHeight = dt.Rows.Count;
      for(int i=0;i<dt.Rows.Count;i )
      {
      barHeight = Convert.ToSingle(dt.Rows[i][1]) * 200 / highPoint;
      barOrigin.Y = CHART_TOP CHART_HEIGHT - barHeight;
      g.FillRectangle(new SolidBrush(ChartUtil.GetChartItemColor(i)),barOrigin.X,barOrigin.Y,barWidth,barHeight);
      barOrigin.X = barOrigin.X (barWidth * 2);
      }
      file://設置邊
      g.DrawLine(new Pen(Color.Black,2),new Point(CHART_LEFT,CHART_TOP),new Point(CHART_LEFT,CHART_TOP CHART_HEIGHT));
      g.DrawLine(new Pen(Color.Black,2),new Point(CHART_LEFT,CHART_TOP CHART_HEIGHT),new Point(CHART_LEFT CHART_WIDTH,CHART_TOP CHART_HEIGHT));
      file://畫圖例框和文字
      g.DrawRectangle(new Pen(Color.Black,1),200,300,199,99);
      g.DrawString("Legend",new Font("Tahoma",12,FontStyle.Bold),Brushes.Black,new PointF(200,300));

      file://畫圖例
      PointF boxOrigin = new PointF(210,330);
      PointF textOrigin = new PointF(235,326);
      for(int i=0;i<dt.Rows.Count;i )
      {
      g.FillRectangle(new SolidBrush(ChartUtil.GetChartItemColor(i)),boxOrigin.X,boxOrigin.Y,20,10);
      g.DrawRectangle(Pens.Black,boxOrigin.X,boxOrigin.Y,20,10);
      g.DrawString(dt.Rows[i][0].ToString() " - " dt.Rows[i][1].ToString(),new Font("Tahoma",10),Brushes.Black,textOrigin);
      boxOrigin.Y = 15;
      textOrigin.Y = 15;
      }
      file://輸出圖形
      bm.Save(target, ImageFormat.Gif);

      file://資源回收
      bm.Dispose();
      g.Dispose();
      }
      }
      public class ChartUtil
      {
      public ChartUtil()
      {
      }
      public static Color GetChartItemColor(int itemIndex)
      {
      Color selectedColor;
      switch(itemIndex)
      {
      case 0:
      selectedColor = Color.Blue;
      break;
      case 1:
      selectedColor = Color.Red;
      break;
      case 2:
      selectedColor = Color.Yellow;
      break;
      case 3:
      selectedColor = Color.Purple;
      break;
      default:
      selectedColor = Color.Green;
      break;
      }
      return selectedColor;
      }
      }
      }

      代碼分析:

      1、引入一些namespace

      using System;

      using System.IO;//用于文件存取

      using System.Data;//用于數據訪問

      using System.Drawing;//提供畫GDI 圖形的基本功能

      using System.Drawing.Text;//提供畫GDI 圖形的高級功能

      using System.Drawing.Drawing2D;//提供畫高級二維,矢量圖形功能

      using System.Drawing.Imaging;//提供畫GDI 圖形的高級功能

      這些namespace將在后面被應用。

      2、自定義一個namespace為Insight_cs.WebCharts,其中包括了兩個類PieChart和BarChart,很清楚,class PieChart是為畫餅圖而建,class BarChart是為畫條形圖而建。由于class PieChart和class BarChar差不多,所以下面我們以餅圖為例,進行代碼分析。

      3、類PieChart建立一個方法Render,此方法可以含一些參數。簡單說明如下:

      參數title,表示餅圖上方的大標題文字。

      參數subtitle,表示餅圖上方的小標題文字。

      參數width,height,表示了整個圖形的大小。


      參數charData是一個DataSet對象實例,用于畫圖使用。

      參數target是Stream對象的實例,用于圖形輸出時使用。

      4、為了增加可讀性,定義一些常量:

      const int SIDE_LENGTH = 400;//畫布邊長

      const int PIE_DIAMETER = 200;//餅圖直徑

      5、定義一個DataTable,它是DataSet中的一個數據表。其中存放了餅圖的各個數據。

      6、通過計算,得出餅圖中的總基數sumData。

      7、建立了一個BitMap對象,它為要創建的圖形提供了內存空間。并由此產生一個Graphics對象,它封裝了GDI 畫圖接口。

      8、調用Graphics對象的方法ScaleTransform(),它是用來設定圖形比例的。

      9、調用方法SmoothingMode(),TextRenderingHint()等來設置文字和圖形的相關屬性。

      9、設置畫布和邊。

      10、設置文字標題,圖例,畫餅圖自身。

      11、通過Stream,將圖形的內容發送到瀏覽器。

      12、最后回收資源。

      至此畫餅圖的類就完成了。畫條形圖的方法和畫餅圖的方法大同小異,這里就不展開講了。

      總體看來,構建畫圖的類沒有我們想象的那樣難,并沒有多么高深的算法。其實整體思路,就好像我們用筆在紙上畫圖是一摸一樣的。關鍵是各個方法的使用和參數設置。

      分享:在ASP.NET中進行文件處理(1)
      一種程序設計語言,對文件處理的能力的大小往往也是一種語言功能大小的一種表現。在ASP.NET中,對于文件的處理主要是通過.Net FrameWork SDK中的一個System.IO的名稱空間來實現了,在System.IO

      來源:模板無憂//所屬分類:.Net教程/更新時間:2008-08-22
      相關.Net教程