用ASP.net/C#畫橫條圖，餅狀圖，曲線圖的原始碼

Chart.aspx.cs的代碼：
using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using System.Drawing;
using System.Drawing.Imaging;
namespace aspCharts
{
///
/// Chart 的摘要說明。
///
public class Chart : System.Web.UI.Page
{
private void Page_Load(object sender, System.EventArgs e)
{

Graphics objGraphics;//建立畫板對象
Bitmap objBitMap = new Bitmap(600,300);//建立位元影像對象
objGraphics = Graphics.FromImage(objBitMap);//根據位元影像對象建立畫板對象
objGraphics.Clear(Color.White);//設定畫板對象的背景色
int[] arrValues={0,0,0,0,0,0};//資料數組
arrValues[0]=50;
arrValues[1]=70;
arrValues[2]=90;
arrValues[3]=100;
arrValues[4]=140;
arrValues[5]=220;
string[] arrValueNames={”0″,”0″,”0″,”0″,”0″,”0″};//月份

arrValueNames[0] = “一月”;
arrValueNames[1]=”二月”;
arrValueNames[2] = “三月”;
arrValueNames[3]=”四月”;
arrValueNames[4]=”五月”;
arrValueNames[5]=”六月”;

objGraphics.DrawString(”上半年銷售情況統計”,new Font(”宋體”,16),Brushes.Black,new PointF(0,0));

//建立圖例文字
PointF symbolLeg = new PointF(335,20);
PointF descLeg = new PointF(360,16);

//畫出圖例。利用objGraphics繪圖物件的三個方法畫出圖例：
//FillRectangle()方法畫出填充矩形，DrawRectangle()方法畫出矩形的邊框，
//DrawString()方法畫出解說文字。這三個繪圖物件的方法在 .NET 架構類庫類庫中均已重載，
//可以很方便根據不同的參數來畫出圖形。

for(int i=0;i
{
objGraphics.FillRectangle(new SolidBrush(GetColor(i)),symbolLeg.X,symbolLeg.Y,20,10);

objGraphics.DrawRectangle(Pens.Black,symbolLeg.X,symbolLeg.Y,20,10);

objGraphics.DrawString(arrValueNames[i].ToString(),new Font(”宋體”,10),Brushes.Black,descLeg);

symbolLeg.Y += 15;
descLeg.Y += 15;
}

for(int j = 0;j
{
objGraphics.FillRectangle(new SolidBrush(GetColor(j)),(j*35)+15,200-arrValues[j],20,arrValues[j]+5);
objGraphics.DrawRectangle(Pens.Black,(j*35)+15,200-arrValues[j],20,arrValues[j]+5);
}

float sglCurrentAngle;
float sglTotalAngle=0;

for (int a = 0; a < arrValues.Length; a++)
{
sglTotalAngle += arrValues[a];//取得資料總量
}

float startAngle = 0;
for (int b = 0; b < arrValues.Length; b++)
{
sglCurrentAngle = arrValues[b] / sglTotalAngle * 360;//求出該資料所佔總資料的百分比
objGraphics.FillPie(new SolidBrush(GetColor(b)), 220, 95, 100, 100, startAngle, sglCurrentAngle);//畫出橢圓
startAngle += sglCurrentAngle;
}

objBitMap.Save(Response.OutputStream,ImageFormat.Gif);//該位元影像對象以”GIF”格式輸出

}

private Color GetColor(int itemIndex)
{
Color objColor = new Color();
switch(itemIndex)
{
case 0:
objColor = Color.Blue;
break;
case 1:
objColor = Color.Yellow;
break;
case 2:
objColor = Color.Red;
break;
case 3:
objColor = Color.Orange;
break;
case 4:
objColor = Color.Purple;
break;
case 5:
objColor = Color.Brown;
break;
case 6:

default:
objColor = Color.Blue;
break;
}

return objColor;
}

#region Web Form設計器產生的程式碼
override protected void OnInit(EventArgs e)
{
//
// CODEGEN: 該調用是 ASP.NET Web Form設計器所必需的。
//
InitializeComponent();
base.OnInit(e);
}

///
/// 設計器支援所需的方法 - 不要使用代碼編輯器修改
/// 此方法的內容。
///
private void InitializeComponent()
{
this.Load += new System.EventHandler(this.Page_Load);
}
#endregion
}
}

用ASP.Net畫橫條圖和餅圖
【摘 要】越來越多的Web應用需要使用圖表來進行資料顯示和分析，利用ASP.NET中關於圖形顯示的類，就可以畫出豐富，動態圖表。

本文代碼是基於Beta2開發

例如：投票結果顯示，公司生產情況統計圖顯示分析等等。利用圖表來顯示資料，具有直觀，清晰等優點。
傳統的ASP技術是不支援畫圖表的，那麼就不得不利用Active X或者Java applets來實現這個功能。新近出現的ASP.NET解決了這個問題，只要利用ASP.NET中關於圖形顯示的類，就可以畫出豐富，動態圖表。本文將要講述如何利用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[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;
}
//畫圖例框及其文字
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[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;
}
//通過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[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);
}
//設定邊
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[i][0].ToString() + " - " + dt.Rows[i][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.最後回收資源。

至此畫餅圖的類就完成了。畫橫條圖的方法和畫餅圖的方法大同小異，這裡就不展開講了。
總體看來，構建畫圖的類沒有我們想象的那樣難，並沒有多麼高深的演算法。其實整體思路，就好像我們用筆在紙上畫圖是一摸一樣的。關鍵是各個方法的使用和參數設定。
我們在前面已經完成了餅圖和橫條圖的自訂類，下面我們將要應用這些類了。
使用vs.net建立一個名為Insight_cs的Web應用程式，並且添加到剛才的Insight工程中。刪除預設的webform1.aspx檔案，建立一個名為SalesChart.aspx檔案。開啟此檔案，在代碼模式下，將第一行替換為：

開啟檔案SalesChart.aspx.cs，其中代碼如下所示：
using System;
using System.Data;
using System.Web;
using System.IO;
using System.Data.SqlClient;
using Insight_cs.WebCharts;//這是自訂的名字空間
namespace Insight_cs
{
public class SalesChart : System.Web.UI.Page
{
public SalesChart()
{
Page.Init += new System.EventHandler(Page_Init);
}
private void Page_Load(object sender, System.EventArgs e)
{
//從資料庫中取得資料，用於畫圖
string sql = "SELECT " +"Year(sa.ord_date) As [Year], " +"SUM(sa.qty) As [Qty] " +"FROM " +"sales sa " +"inner join stores st on(sa.stor_id = st.stor_id) " +"GROUP BY " +"Year(sa.ord_date) " + "ORDER BY " + "[Year]";
string connectString = "Password=ben; User ID=sa; DataBase=pubs;Data Source=localhost";
SqlDataAdapter da = new SqlDataAdapter(sql,connectString);
DataSet ds = new DataSet();
int rows = da.Fill(ds,"chartData");
//設定產生圖的類型（pie or bar）
string type = "";
if(null==Request["type"])
{
type = "PIE";
}
else
{
type = Request["type"].ToString().ToUpper();
}
//設定圖大小
int width = 0;
if(null==Request["width"])
{
width = 400;
}
else
{
width = Convert.ToInt32(Request["width"]);
}
int height = 0;
if(null==Request["height"])
{
height = 400;
}
else
{
height = Convert.ToInt32(Request["height"]);
}
//設定圖表標題
string title = "";
if(null!=Request["title"])
{
title = Request["title"].ToString();
}
string subTitle = "";
if(null!=Request["subtitle"])
{
subTitle = Request["subtitle"].ToString();
}
if(0<rows)
{
switch(type)
{
case "PIE":
PieChart pc = new PieChart();
pc.Render(title,subTitle,width,height,ds,Response.OutputStream);
break;
case "BAR":
BarChart bc = new BarChart();
bc.Render(title,subTitle,width,height,ds,Response.OutputStream);
break;
default:

break;
}
}
}
private void Page_Init(object sender, EventArgs e)
{
//
// CODEGEN: This call is required by the ASP.NET Web Form Designer.
//
InitializeComponent();
}
#region Web Form Designer generated code
///

/// Required method for Designer support - do not modify
/// the contents of this method with the code editor.
///

private void InitializeComponent()
{
this.Load += new System.EventHandler(this.Page_Load);
}
#endregion
}
}
以上的代碼並沒有什麼難的，這裡就不做分析了。
在vs.net中，開啟Insight_cs solution，右擊”引用“，將出現”添加引用“，將組件檔案Insight_cs.WebCharts.dll加入，使其成為項目中的namespace。
下面我們就可以瀏覽結果了。
首先建立一個demochart.aspx檔案，在其代碼中，加入一下內容：

type表示顯示圖形的類型，是餅圖pie，還是橫條圖bar。
width，height表示圖形的大小。
title表示大標題文字。
subtitle表示小標題文字。
。

由此，我們完成了利用asp.net技術畫圖的過程。
綜合起來，可以總結出以下幾點：1.利用ASP.NET技術，可以在不使用第三方組件的情況下，畫出理想的圖形。2.畫圖核心是構造一個BitMap（位元影像）對象，它為要建立的圖形提供了記憶體空間。然後，利用有關namespace提供的類和方法畫出圖形。最後就可以調用Bitmap對象的“Save”方法，將其發送到任何.NET的輸出資料流中，這裡是直接將圖形的內容發送到瀏覽器，而沒有將其儲存到磁碟中。