越來越多的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];
//通過輸入參數，取得餅圖中的總基數
float sumData = 0;
foreach(DataRow dr in dt.Rows)
{
sumData += Convert.ToSingle(dr[1]);
}
//產生一個image對象，並由此產生一個Graphics對象
Bitmap bm = new Bitmap(width,height);
Graphics g = Graphics.FromImage(bm);
//設置對象g的屬性
g.ScaleTransform((Convert.ToSingle(width))/SIDE_LENGTH,(Convert.ToSingle(height))/SIDE_LENGTH);
g.SmoothingMode = SmoothingMode.Default;
g.TextRenderingHint = TextRenderingHint.AntiAlias;
//畫布和邊的設定
g.Clear(Color.White);
g.DrawRectangle(Pens.Black,0,0,SIDE_LENGTH-1,SIDE_LENGTH-1);
//畫餅圖標題
g.DrawString(title,new Font("Tahoma",24),Brushes.Black,new PointF(5,5));
//畫餅圖的圖例
g.DrawString(subTitle,new Font("Tahoma",14),Brushes.Black,new PointF(7,35));
//畫餅圖
float curAngle = 0;
float totalAngle = 0;
for(int i=0;i<dt.Rows.Count;i++)
{
curAngle = Convert.ToSingle(dt.Rows[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;
}
//畫圖例框及其文字
g.DrawRectangle(Pens.Black,200,300,199,99);
g.DrawString("Legend",new Font("Tahoma",12,FontStyle.Bold),Brushes.Black,new PointF(200,300));
//畫圖例各項
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[1]) / sumData * 100;
g.DrawString(dt.Rows[0].ToString() + " - " + dt.Rows[1].ToString() + " (" + percent.ToString("0") + "%)",new Font("Tahoma",10),Brushes.Black,textOrigin);
boxOrigin.Y += 15;
textOrigin.Y += 15;
}
//通過Response.OutputStream，將圖形的內容發送到瀏覽器
bm.Save(target, ImageFormat.Gif);
//回收資源
bm.Dispose();
g.Dispose();
}
}
//畫條形圖
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];
//計算最高的點
float highPoint = 0;
foreach(DataRow dr in dt.Rows)
{
if(highPoint<Convert.ToSingle(dr[1]))
{
highPoint = Convert.ToSingle(dr[1]);
}
}
//建立一個Graphics對象實例
Bitmap bm = new Bitmap(width,height);
Graphics g = Graphics.FromImage(bm);
//設置條圖圖形和文字屬性
g.ScaleTransform((Convert.ToSingle(width))/SIDE_LENGTH,(Convert.ToSingle(height))/SIDE_LENGTH);
g.SmoothingMode = SmoothingMode.Default;
g.TextRenderingHint = TextRenderingHint.AntiAlias;
//設定畫布和邊
g.Clear(Color.White);
g.DrawRectangle(Pens.Black,0,0,SIDE_LENGTH-1,SIDE_LENGTH-1);
//畫大標題
g.DrawString(title,new Font("Tahoma",24),Brushes.Black,new PointF(5,5));
//畫小標題
g.DrawString(subTitle,new Font("Tahoma",14),Brushes.Black,new PointF(7,35));
//畫條形圖
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[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);
}
//設置邊
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));
//畫圖例框和文字
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));
//畫圖例
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[0].ToString() + " - " + dt.Rows[1].ToString(),new Font("Tahoma",10),Brushes.Black,textOrigin);
boxOrigin.Y += 15;
textOrigin.Y += 15;
}
//輸出圖形
bm.Save(target, ImageFormat.Gif);
//資源回收
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.最後回收資源。
文章引用自：http://publishblog.blogchina.com/blog/tb.b?diaryID=1320471
