|
折線圖表
折線圖表是程序中經(jīng)常用到的一種圖表技術(shù)，通過折線圖表，可以很直觀地反映出數(shù)據(jù)的變化。本節(jié)中通過幾個實例向讀者詳細(xì)介紹折線圖表的繪制技術(shù)。
實例297 折線圖表分析人口出生率
實例說明
在進(jìn)行人口統(tǒng)計時，經(jīng)常需要對人口出生率進(jìn)行統(tǒng)計分析，為了使統(tǒng)計的結(jié)果更加明了，可以將人口出生率以折線的形式展示給用戶。運行本實例，在Default.aspx頁面中選擇要查看的年份后，即可在CountMontn.aspx頁面中查看該年份的人口出生率折線圖，如圖13.10所示，其中紅色折線即為人口出生率。
 |
| 圖13.10 折線圖表分析人口出生率 |
技術(shù)要點
本實例主要通過using System.Drawing命名空間中Graphics類的DrawLines方法來實現(xiàn)。DrawLines方法用于繪制一系列連接一組Point結(jié)構(gòu)的線段，其語法格式如下。
public void DrawLines(Pen pen,Point[] points)
|
參數(shù)說明：
pen：它確定線段的顏色、寬度和樣式。
points：結(jié)構(gòu)數(shù)組，這些結(jié)構(gòu)表示要連接的點。
注意：此方法用來繪制一系列連接一組終結(jié)點的線條。數(shù)組中的前兩個點指定第一條線。每個附加點指定一個線段的終結(jié)點，該線段的起始點是前一條線段的結(jié)束點。
實現(xiàn)過程
（1）新建一個網(wǎng)站，將其命名為Ex13_10，默認(rèn)主頁為Default.aspx，添加新Web窗體，將其命名為CountMonth.aspx。
（2）后臺代碼中自定義了兩個方法，它們分別用來計算各月份訪問量總和以及將各月份所占百分比繪制出來，計算各月份訪問量總和用到自定義方法SumYear(int Year)，該方法的主要程序代碼如下：
private int SumYear(int Year)
{
string cmdtxt2 = "SELECT SUM(Year_M1+Year_
M2+Year_M3+Year_M4+Year_M5+Year_M6+Year_M7+
Year_ M8+ Year_ M9+Year_M10+Year_M11+Year_M12)
AS number FROM tb_07 WHERE ShowYear=" + Year + "";
SqlConnection Con = new SqlConnection
(ConfigurationManager.AppSettings["ConSql"]);
Con.Open( );
SqlDataAdapter dap = new SqlDataAdapter(cmdtxt2, Con);
DataSet ds = new DataSet( );
dap.Fill(ds);
return Convert.ToInt32(ds.Tables[0].Rows[0][0].ToString( ));
} | 由于本實例中的CreateImage(int Year)方法代碼較多，下面進(jìn)行分段講解。畫圖之前，必須先建立一個Bitmap對象和一個Graphics對象，以便能夠完成圖形繪制。創(chuàng)建Bitmap對象和Graphics對象的主要代碼如下：
//定義畫布大小
int height = 440, width = 600;
System.Drawing.Bitmap image = new System.Drawing.Bitmap(width,height);
//創(chuàng)建Graphics類對象
Graphics g = Graphics.FromImage(image); | 畫圖對象創(chuàng)建完成后，下面需要繪制線條，繪制線條代碼如下：
//清空圖片背景色
g.Clear(Color.White);
Font font = new System.Drawing.Font("Arial", 9,FontStyle.Regular);
Font font1 = new System.Drawing.Font("宋體", 20, FontStyle.Regular);
Font font2 = new System.Drawing.Font("Arial", 8, FontStyle.Regular);
System.Drawing.Drawing2D.LinearGradientBrush brush =
new System.Drawing. Drawing2D.LinearGradientBrush
(new Rectangle(0, 0, image.Width, image.Height), Color.Blue,Color.Blue, 1.2f, true);
g.FillRectangle(Brushes.AliceBlue, 0, 0, width, height);
Brush brush1 = new SolidBrush(Color.Blue);
Brush brush2 = new SolidBrush(Color.SaddleBrown);
g.DrawString(""+Year+"年各月份人口出生率",
font1, brush1, new PointF(130, 30));
//畫圖片的邊框線
g.DrawRectangle(new Pen(Color.Blue), 0,0,
image.Width - 1, image.Height - 1);
Pen mypen = new Pen(brush,1);
Pen mypen2 = new Pen(Color.Red,2);
//繪制線條
//繪制縱向線條
int x = 60;
for (int i = 0; i < 12; i++)
{
g.DrawLine(mypen,x, 80, x, 340);
x = x+40;
}
Pen mypen1 = new Pen(Color.Blue,2);
g.DrawLine(mypen1, x-480, 80, x-480, 340);
//繪制橫向線條
int y = 106;
for (int i = 0; i <9; i++)
{
g.DrawLine(mypen,60, y, 540, y);
y = y + 26;
}
g.DrawLine(mypen1, 60, y, 540, y); |
線條繪制完成后，需要為繪制完的框架添加標(biāo)記，本實例主要給對應(yīng)的線條添加月份和百分比，主要程序代碼如下：
//x軸上對應(yīng)的標(biāo)記
String[] n = {" 一月", " 二月", " 三月", "
四月", " 五月", " 六月", " 七月",
" 八月", " 九月", " 十月", "十一月",
"十二月"};
x = 35;
for (int i = 0; i < 12; i++)
{
g.DrawString(n[i].ToString( ),
font,Brushes.Red, x, 348); //設(shè)置文字內(nèi)容及輸出位置
x = x + 40;
}
//y軸上對應(yīng)的標(biāo)記
String[] m = {"45%", " 40%", " 35%", "
30%", " 25%", " 20%", " 15%", " 10%",
" 5%"};
y = 100;
for (int i = 0; i < 9; i++)
{
g.DrawString(m[i].ToString( ),font,
Brushes.Red, 25, y); //設(shè)置文字內(nèi)容及輸出位置
y = y + 26;
} | 基本框架繪制完成后，下面要將數(shù)據(jù)庫中的數(shù)據(jù)檢索出來并以一定的比例繪制到圖像中，檢索數(shù)據(jù)并繪制折線的代碼如下：
int[] Count = new int[12];
string cmdtxt2 = "SELECT * FROM tb_07 WHERE ShowYear="+Year+"";
SqlConnection Con = new SqlConnection
(ConfigurationManager.AppSettings["ConSql"]);
Con.Open( );
SqlCommand Com = new SqlCommand(cmdtxt2, Con);
SqlDataAdapter da = new SqlDataAdapter( );
da.SelectCommand = Com;
DataSet ds = new DataSet( );
da.Fill(ds);
int j = 0;
int number = SumYear(Year);
for(j=0;j<12;j++)
{
Count[j] = Convert.ToInt32(ds.Tables[0].Rows[0][j+1].
ToString( )) * 50 / number;
}
double[] Percent = new double[12];
for (int i = 0; i < 12; i++)
{
Percent[i] = Convert.ToDouble(ds.Tables[0].Rows[0][i + 1].
ToString( )) * 50 / Convert.ToDouble(number);
}
x = 60;
for (int i = 0; i < 12; i++)
{
if (Percent[i].ToString( ).Length >= 5)
{
//設(shè)置文字內(nèi)容及輸出位置
g.DrawString(Percent[i].ToString( ).Substring(0, 5)
+ "%", font2, brush2, x, 340 - Count[i] * 26 / 5);
x = x + 40;
}
else
{
//設(shè)置文字內(nèi)容及輸出位置
g.DrawString("0%", font2, brush2, x, 340 - Count[i] * 26 / 5);
x = x + 40;
}
}
//顯示折線效果
SolidBrush mybrush = new SolidBrush(Color.Red);
Point[] points = new Point[12];
points[0].X = 60; points[0].Y = 340-Count[0] * 26 / 5;
points[1].X =100; points[1].Y = 340 - Count[1] * 26 / 5;
points[2].X = 140; points[2].Y = 340 - Count[2] * 26 / 5;
points[3].X = 180; points[3].Y = 340 - Count[3] * 26 / 5;
points[4].X = 220; points[4].Y = 340 - Count[4] * 26 / 5;
points[5].X = 260; points[5].Y = 340 - Count[5] * 26 / 5;
points[6].X = 300; points[6].Y = 340 - Count[6] * 26 / 5;
points[7].X = 340; points[7].Y = 340 - Count[7] * 26 / 5;
points[8].X = 380; points[8].Y = 340 - Count[8] * 26 / 5;
points[9].X = 420; points[9].Y = 340 - Count[9] * 26 / 5;
points[10].X = 460; points[10].Y = 340 - Count[10] * 26 / 5;
points[11].X = 500; points[11].Y = 340 - Count[11] * 26 / 5;
g.DrawLines(mypen2, points); | 以上操作完成了圖形的繪制，最后將圖像顯示到頁面中。將圖像顯示到頁面中的主要程序代碼如下：
System.IO.MemoryStream ms = new System.IO.MemoryStream( );
image.Save(ms, System.Drawing.Imaging.ImageFormat.Gif);
Response.ClearContent( );
Response.ContentType = "image/Gif";
Response.BinaryWrite(ms.ToArray( ));
|
舉一反三
根據(jù)本實例，讀者可以：
開發(fā)股票統(tǒng)計分析模塊；
開發(fā)家電價格分析模塊；
開發(fā)石油產(chǎn)品市場行情模塊。
|
