Asp.net实例：C#代码绘制折线图

1.思路分析：

1.首先肯定是读取数据库，将数据表中的这三列数据查出来并放进三个数组中；

2.新建一个Bitmap，所有要画的图形用Graphics来实现；

3.依据屏幕坐标，先画出X轴和Y轴，再标上刻度；

4.以X轴和Y轴为基础，算出每个数据在屏幕上的相对坐标，并画成折线；

5.在数据点上画点，并标出数据值；

6.修饰图形，并标注文字等信息，结束。

2.数据的获取

1.从数据库中获取数据
建立数据库连接并查询，可以专门新建一个C#类来提高代码复用率，也可以只写一个函数。下面的代码是原作者写的一个C#类SQL_Connection，放在App_Code文件夹下，专门用来执行数据库操作（我直接新建了一个数据库helper类，前面的文章里已经有了）代码如下：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data;
using System.Data.SqlClient;

///
///公用的连接数据库的类
///
public class SQL_Connection
{
private string sql = null;

public SQL_Connection(string sql)
{
this.sql = sql;
}
public DataSet query()
{
string ConStr = "Data Source=……;Initial Catalog=……;Persist SecurityInfo=True;UserID=……;Password=……";
SqlConnection conn = new SqlConnection(ConStr);
SqlCommand cmd = conn.CreateCommand();
cmd.CommandText = this.sql;
cmd.CommandTimeout = 10000;
conn.Open();
SqlDataAdapter adapter = new SqlDataAdapter(cmd);
DataSet ds = new DataSet();
adapter.Fill(ds);
conn.Close();
return ds;
}
}

2.在后台的CS文件中执行数据库查询，并将结果放在数组中，具体代码如下：

//查询数据库

string sql = "select * from manqi_cx where manqpfl <>0 and manqpfl1<>0 and manqpfl2<>0 and bmid=2";
SQL_Connection sqlCon = new SQL_Connection(sql);
DataSet ds = sqlCon.query();

//将结果放进数组中
double[] manqpfl = new double[TotalMonths];
double[] manqpfl1 = new double[TotalMonths];
double[] manqpfl2 = new double[TotalMonths];
for (int i = 0; i
{
manqpfl[i] = Convert.ToDouble(ds.Tables[0].Rows[i]["manqpfl"]);
manqpfl1[i] = Convert.ToDouble(ds.Tables[0].Rows[i]["manqpfl1"]);
manqpfl2[i] = Convert.ToDouble(ds.Tables[0].Rows[i]["manqpfl2"]);
}

3.具体实现

1.新建Bitmap，并用Graphics来画图和标注文字，具体代码如下：

Bitmap image = new Bitmap(width, height);
Graphics graphics = Graphics.FromImage(image);
try
{
graphics.Clear(Color.White);
Font font = new Font("Arial", 9, FontStyle.Regular);//坐标刻度所使用的字体
Font font1 = new Font("宋体", 15, FontStyle.Regular);//图片标题所使用的字体
Font font2 = new Font("宋体", 10, FontStyle.Regular);//注释信息所使用的字体
LinearGradientBrush brush = new LinearGradientBrush(new Rectangle(0, 0, image.Width, image.Height), Color.Gray, Color.Gray, 1.2f, true);//绘制网格线的LinearGradientBrush
LinearGradientBrush brush2 = new LinearGradientBrush(new Rectangle(0, 0, image.Width, image.Height), Color.Red, Color.Red, 1.2f, true);//注释信息的LinearGradientBrush
LinearGradientBrush brush3 = new LinearGradientBrush(new Rectangle(0, 0, image.Width, image.Height), Color.Green, Color.Green, 1.2f, true);//注释信息的LinearGradientBrush
LinearGradientBrush brush4 = new LinearGradientBrush(new Rectangle(0, 0, image.Width, image.Height), Color.Brown, Color.Brown, 1.2f, true);//注释信息的LinearGradientBrush

graphics.FillRectangle(Brushes.White, 0, 0, width, height);
Brush brush1 = new SolidBrush(Color.Black);
if (manqpfl.Length > 0 & manqpfl1.Length > 0 & manqpfl2.Length > 0)
{
graphics.DrawString(" 从" + MinYear.ToString() + "年"+MinMonth.ToString()+"月到" + MaxYear.ToString() + "年"+MaxMonth.ToString()+"月的满期数据折线图", font1, brush1, new PointF(width / 2 - 200, 30));//标注图片标题
graphics.DrawString("商业险为红色折线", font2, brush2, new PointF(width / 2 + 200, 500));//标注注释信息
graphics.DrawString("交强险为绿色折线", font2, brush3, new PointF(width / 2 + 200, 530));//标注注释信息
graphics.DrawString("车 险为棕色折线", font2, brush4, new PointF(width / 2 + 200, 560));//标注注释信息
}
//画图片的边框线
graphics.DrawRectangle(new Pen(Color.Black), 0, 0, image.Width - 1, image.Height - 1);

//绘制Y轴
int x = 60;
Pen mypen1 = new Pen(Color.Black, 2);
graphics.DrawLine(mypen1, x, 120, x, 458);
//绘制网格纵线
Pen mypen = new Pen(brush, 1);
for (int i = 0; i < TotalMonths; i++)
{
graphics.DrawLine(mypen, x, 120, x, 458);
x = x + 60; //Y轴上每60像素为一个单位刻度
}
//绘制网格横线
int y = 158;
for (int i = 0; i < 5; i++)
{
graphics.DrawLine(mypen, 60, y, width-15, y);
y = y + 60; //X轴上每60像素为一个单位刻度
}
//绘制X轴
graphics.DrawLine(mypen1, 60, y, width-15, y);

//标注x轴文字
x = 35;
for (int i = 0; i < TotalMonths; i++)
{
string month= ds.Tables[0].Rows[i]["yy"].ToString() + "." + ds.Tables[0].Rows[i]["mm"].ToString();
graphics.DrawString(month.ToString(), font, Brushes.Red, x, 460); //设置文字内容及输出位置
x = x + 60; //X轴上每60像素为一个单位刻度
}
//y轴文字
String[] m = { " 90", " 80", " 70", " 60", " 50" ," 40"};
y = 150;
for (int i = 0; i < 6; i++)
{
graphics.DrawString(m[i].ToString(), font, Brushes.Red, 25, y); //设置文字内容及输出位置
y = y + 60; //Y轴上每60像素为一个单位刻度
}

int[] Count = new int[TotalMonths];
int[] Count1 = new int[TotalMonths];
int[] Count2 = new int[TotalMonths];
for (int j = 0; j < TotalMonths; j++)
{
Count[j] = Convert.ToInt32(manqpfl[j] * 360 / 60);//求数据点对坐标轴的相对位移
Count1[j] = Convert.ToInt32(manqpfl1[j] * 360 / 60);
Count2[j] = Convert.ToInt32(manqpfl2[j] * 360 / 60);
}

Point[] myPoint = caculatePoints(Count, TotalMonths);//求出数据点在屏幕上的绝对位置
Point[] myPoint1 = caculatePoints(Count1, TotalMonths);
Point[] myPoint2 = caculatePoints(Count2, TotalMonths);

Pen mypen2 = new Pen(Color.Red, 2);//manqpfl折线为红色
Pen mypen3 = new Pen(Color.Green, 2);//manqpfl1折线为绿色
Pen mypen4 = new Pen(Color.Brown, 2);//manqpfl2折线为棕色

graphics.DrawLines(mypen2, myPoint); //绘制manqpfl折线
graphics.DrawLines(mypen3, myPoint1); //绘制manqpfl1折线
graphics.DrawLines(mypen4, myPoint2); //绘制manqpfl2折线

//标注数据点的值
for (int i = 0; i < TotalMonths;i++ )
{
graphics.DrawString(manqpfl[i].ToString(), font, Brushes.Blue, myPoint[i].X-8, myPoint[i].Y-15);
graphics.DrawString(manqpfl1[i].ToString(), font, Brushes.Blue, myPoint1[i].X-8, myPoint1[i].Y-15);
graphics.DrawString(manqpfl2[i].ToString(), font, Brushes.Blue, myPoint2[i].X-8, myPoint2[i].Y-15);
}

//输出Bitmap
System.IO.MemoryStream MStream = new System.IO.MemoryStream();
image.Save(MStream, System.Drawing.Imaging.ImageFormat.Gif);
Response.ClearContent();
Response.ContentType = "image/Gif";
Response.BinaryWrite(MStream.ToArray());
//this.mess.InnerHtml = MStream.ToArray().ToString();
}
finally
{
graphics.Dispose();
image.Dispose();
}

//计算折线中点的坐标
protected Point[] caculatePoints(int[] Count,int TotalNumber)
{
Point[] myPoint = new Point[TotalNumber];
for (int i = 0; i < TotalNumber; i++)
{
myPoint[i].X = 60 + i * 60; myPoint[i].Y = 700 - Count[i];
}
return myPoint;
}

举例说明：

新建一个网页为Default3.aspx；

然后直接在Default3.aspx.cs后台页面中写代码，如下：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Drawing;
using System.Drawing.Drawing2D;

public partial class Default3 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

//初始化数据

double[] manqpfl0 ={ 2009.1, 2009.2, 2009.3, 2009.4, 2009.5, 2009.6, 2009.7, 2009.8, 2009.9, 2009.10, 2009.11, 2009.12, 2010.1, 2010.2, 2010.3 };
double[] manqpfl = { 84, 85, 86, 84, 85, 84, 86, 87, 85, 84, 88, 87, 84, 85, 87 };
double[] manqpfl1 = { 72, 71, 71, 72, 71, 72, 71, 72, 71, 72, 71, 72, 71, 72, 717 };
double[] manqpfl2 = { 60, 61, 60, 61, 60, 61, 60, 61, 60, 61, 60, 61, 60, 61, 62 };
int TotalMonths = 14;


Bitmap image = new Bitmap(1000, 1000);
Graphics graphics = Graphics.FromImage(image);
try
{
graphics.Clear(Color.White);
Font font = new Font("Arial", 9, FontStyle.Regular);//坐标刻度所使用的字体
Font font1 = new Font("宋体", 15, FontStyle.Regular);//图片标题所使用的字体
Font font2 = new Font("宋体", 10, FontStyle.Regular);//注释信息所使用的字体
LinearGradientBrush brush = new LinearGradientBrush(new Rectangle(0, 0, image.Width, image.Height), Color.Gray, Color.Gray, 1.2f, true);//绘制网格线的LinearGradientBrush
LinearGradientBrush brush2 = new LinearGradientBrush(new Rectangle(0, 0, image.Width, image.Height), Color.Red, Color.Red, 1.2f, true);//注释信息的LinearGradientBrush
LinearGradientBrush brush3 = new LinearGradientBrush(new Rectangle(0, 0, image.Width, image.Height), Color.Green, Color.Green, 1.2f, true);//注释信息的LinearGradientBrush
LinearGradientBrush brush4 = new LinearGradientBrush(new Rectangle(0, 0, image.Width, image.Height), Color.Brown, Color.Brown, 1.2f, true);//注释信息的LinearGradientBrush

graphics.FillRectangle(Brushes.White, 0, 0, 1000, 1000);
Brush brush1 = new SolidBrush(Color.Black);

//判断是否有数据
if (manqpfl.Length > 0 & manqpfl1.Length > 0 & manqpfl2.Length > 0)
{
graphics.DrawString(" 从2009年1月到2010年3月的满期数据折线图", font1, brush1, new PointF(1000 / 2 - 200, 30));//标注图片标题
graphics.DrawString("商业险为红色折线", font2, brush2, new PointF(1000 / 2 + 200, 500));//标注注释信息
graphics.DrawString("交强险为绿色折线", font2, brush3, new PointF(1000 / 2 + 200, 530));//标注注释信息
graphics.DrawString("车 险为棕色折线", font2, brush4, new PointF(1000 / 2 + 200, 560));//标注注释信息
}
//画图片的边框线
graphics.DrawRectangle(new Pen(Color.Black), 0, 0, image.Width - 1, image.Height - 1);

//绘制Y轴
int x = 60;
Pen mypen1 = new Pen(Color.Black, 2);
graphics.DrawLine(mypen1, x, 120, x, 458);
//绘制网格纵线
Pen mypen = new Pen(brush, 1);
for (int i = 0; i < TotalMonths; i++)
{
graphics.DrawLine(mypen, x, 120, x, 458);
x = x + 60; //Y轴上每60像素为一个单位刻度
}
//绘制网格横线
int y = 158;
for (int i = 0; i < 5; i++)
{
graphics.DrawLine(mypen, 60, y, 1000 - 15, y);
y = y + 60; //X轴上每60像素为一个单位刻度
}
//绘制X轴
graphics.DrawLine(mypen1, 60, y, 1000 - 15, y);

//标注x轴文字
x = 35;
for (int i = 0; i < TotalMonths; i++)
{
string month = manqpfl0[i].ToString(); //直接显示年月
graphics.DrawString(month.ToString(), font, Brushes.Red, x, 460); //设置文字内容及输出位置
x = x + 60; //X轴上每60像素为一个单位刻度
}
//y轴文字
String[] m = { " 90", " 80", " 70", " 60", " 50", " 40" };
y = 150;
for (int i = 0; i < 6; i++)
{
graphics.DrawString(m[i].ToString(), font, Brushes.Red, 25, y); //设置文字内容及输出位置
y = y + 60; //Y轴上每60像素为一个单位刻度
}

int[] Count = new int[TotalMonths];
int[] Count1 = new int[TotalMonths];
int[] Count2 = new int[TotalMonths];
for (int j = 0; j < TotalMonths; j++)
{
Count[j] = Convert.ToInt32(manqpfl[j] * 360 / 60);//求数据点对坐标轴的相对位移
Count1[j] = Convert.ToInt32(manqpfl1[j] * 360 / 60);
Count2[j] = Convert.ToInt32(manqpfl2[j] * 360 / 60);
}

Point[] myPoint = caculatePoints(Count, TotalMonths);//求出数据点在屏幕上的绝对位置
Point[] myPoint1 = caculatePoints(Count1, TotalMonths);
Point[] myPoint2 = caculatePoints(Count2, TotalMonths);

Pen mypen2 = new Pen(Color.Red, 2);//manqpfl折线为红色
Pen mypen3 = new Pen(Color.Green, 2);//manqpfl1折线为绿色
Pen mypen4 = new Pen(Color.Brown, 2);//manqpfl2折线为棕色

graphics.DrawLines(mypen2, myPoint); //绘制manqpfl折线
graphics.DrawLines(mypen3, myPoint1); //绘制manqpfl1折线
graphics.DrawLines(mypen4, myPoint2); //绘制manqpfl2折线

//标注数据点的值
for (int i = 0; i < TotalMonths; i++)
{
graphics.DrawString(manqpfl[i].ToString(), font, Brushes.Blue, myPoint[i].X - 8, myPoint[i].Y-15);
graphics.DrawString(manqpfl1[i].ToString(), font, Brushes.Blue, myPoint1[i].X - 8, myPoint1[i].Y - 15);
graphics.DrawString(manqpfl2[i].ToString(), font, Brushes.Blue, myPoint2[i].X - 8, myPoint2[i].Y - 15);
}

//输出Bitmap
System.IO.MemoryStream MStream = new System.IO.MemoryStream();
image.Save(MStream, System.Drawing.Imaging.ImageFormat.Gif);
Response.ClearContent();
Response.ContentType = "image/Gif";
Response.BinaryWrite(MStream.ToArray());

}
finally
{
graphics.Dispose();
image.Dispose();
}
}



//计算折线中点的坐标
protected Point[] caculatePoints(int[] Count,int TotalNumber)
{
Point[] myPoint = new Point[TotalNumber];
for (int i = 0; i < TotalNumber; i++)
{
myPoint[i].X = 60 + i * 60; myPoint[i].Y = 700 - Count[i];
}
return myPoint;
}
}

这样就可以完成折线图的绘制了！