本文代碼是基于beta2開發(fā)
越來越多的web應(yīng)用需要使用圖表來進行數(shù)據(jù)顯示和分析。例如：投票結(jié)果顯示，公司生產(chǎn)情況統(tǒng)計圖顯示分析等等。利用圖表來顯示數(shù)據(jù)，具有直觀，清晰等優(yōu)點。
傳統(tǒng)的asp技術(shù)是不支持畫圖表的，那么就不得不利用active x或者java applets來實現(xiàn)這個功能。新近出現(xiàn)的asp.net解決了這個問題，只要利用asp.net中關(guān)于圖形顯示的類，就可以畫出豐富，動態(tài)的圖表(如圖1)。本文將要講述如何利用asp.net技術(shù)結(jié)合ado.net技術(shù)畫條形圖和餅圖。
圖1
首先建立一個c#的類庫。
打開vs.net，建立一個名為insight_cs.webcharts新的類庫工程，將解決方案的名稱改為insight，將class.cs文件名改為insight_cs.webcharts.cs，最后打開insight_cs.webcharts.cs文件。其中代碼如下：
/*自定義類，通過輸入不同的參數(shù)，這些類可以畫不同的圖形 */
using system;
using system.io;//用于文件存取
using system.data;//用于數(shù)據(jù)訪問
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];
//通過輸入?yún)?shù)，取得餅圖中的總基數(shù)
float sumdata = 0;
foreach(datarow dr in dt.rows)
{
sumdata += convert.tosingle(dr[1]);
}
//產(chǎn)生一個image對象，并由此產(chǎn)生一個graphics對象
bitmap bm = new bitmap(width,height);
graphics g = graphics.fromimage(bm);
//設(shè)置對象g的屬性
g.scaletransform((convert.tosingle(width))/side_length,(convert.tosingle(height))/side_length);
g.smoothingmode = smoothingmode.default;
g.textrenderinghint = textrenderinghint.antialias;
//畫布和邊的設(shè)定
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，將圖形的內(nèi)容發(fā)送到瀏覽器
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);
//設(shè)置條圖圖形和文字屬性
g.scaletransform((convert.tosingle(width))/side_length,(convert.tosingle(height))/side_length);
g.smoothingmode = smoothingmode.default;
g.textrenderinghint = textrenderinghint.antialias;
//設(shè)定畫布和邊
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);
}
//設(shè)置邊
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;//用于數(shù)據(jù)訪問
using system.drawing;//提供畫gdi+圖形的基本功能
using system.drawing.text;//提供畫gdi+圖形的高級功能
using system.drawing.drawing2d;//提供畫高級二維，矢量圖形功能
using system.drawing.imaging;//提供畫gdi+圖形的高級功能
這些namespace將在后面被應(yīng)用。
2.自定義一個namespace為insight_cs.webcharts，其中包括了兩個類piechart和barchart，很清楚，class piechart是為畫餅圖而建，class barchart是為畫條形圖而建。由于class piechart和class barchar差不多，所以下面我們以餅圖為例，進行代碼分析。
3.類piechart建立一個方法render，此方法可以含一些參數(shù)。簡單說明如下：
參數(shù)title，表示餅圖上方的大標題文字。
參數(shù)subtitle，表示餅圖上方的小標題文字。
參數(shù)width，height，表示了整個圖形的大小。
參數(shù)chardata是一個dataset對象實例，用于畫圖使用。
參數(shù)target是stream對象的實例，用于圖形輸出時使用。
4.為了增加可讀性，定義一些常量：
const int side_length = 400;//畫布邊長
const int pie_diameter = 200;//餅圖直徑
5.定義一個datatable，它是dataset中的一個數(shù)據(jù)表。其中存放了餅圖的各個數(shù)據(jù)。
6.通過計算，得出餅圖中的總基數(shù)sumdata。
7.建立了一個bitmap對象，它為要創(chuàng)建的圖形提供了內(nèi)存空間。并由此產(chǎn)生一個graphics對象，它封裝了gdi+畫圖接口。
8.調(diào)用graphics對象的方法scaletransform()，它是用來設(shè)定圖形比例的。
9.調(diào)用方法smoothingmode()，textrenderinghint()等來設(shè)置文字和圖形的相關(guān)屬性。
9.設(shè)置畫布和邊。
10.設(shè)置文字標題，圖例，畫餅圖自身。
11.通過stream，將圖形的內(nèi)容發(fā)送到瀏覽器。
12.最后回收資源。
至此畫餅圖的類就完成了。畫條形圖的方法和畫餅圖的方法大同小異，這里就不展開講了。
總體看來，構(gòu)建畫圖的類沒有我們想象的那樣難，并沒有多么高深的算法。其實整體思路，就好像我們用筆在紙上畫圖是一摸一樣的。關(guān)鍵是各個方法的使用和參數(shù)設(shè)置。
本文來源于網(wǎng)頁設(shè)計愛好者web開發(fā)社區(qū)http://www.html.org.cn收集整理，歡迎訪問。
