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

教程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 畫圖接口。