ASP.NET自身提供的画图功能也是很强大的,在实际的项目中有时也会经常用到的,实现这样的功能方法很多,诸如水晶报表之类也可以实现,但有时我们只想实现单一的某些功能或许就可以考虑画图的功能了。实现画图其实并不难,这里介绍的是通过Graphics类来产生一个Bitmap对象,接下去你是直接写到页面还是生成某个图片保存至某个路径,看你自己方便了,gfreesky在这里选择了后者作为示例,如果各位朋友有什么不明白的可以留言或Email给我,我的Email:gfreesky@gmail.com
废话不多说,先看下效果:
好了,切入正题,首先页面部分
<
form id
=
"
form1
"
runat
=
"
server
"
>
< div >
< asp:Image ID = " Image1 " runat = " server " />
</ div >
</ form >
< div >
< asp:Image ID = " Image1 " runat = " server " />
</ div >
</ form >
后台cs:
using
System.Data.SqlClient;
using System.Drawing;
using System.Drawing.Imaging;
using SkyNet.Chart;
using SkyNet.OA.OAWebUtility;
public partial class SkyNetChart_MyBar : System.Web.UI.Page
{
protected void Page_Load( object sender, EventArgs e)
{
if ( ! IsPostBack)
{
InitChart();
}
}
private void InitChart()
{
Bar barImg = new Bar(); // 定义一个画图类实例
barImg.Title = " 2008年销售情况统计表 " ;
barImg.TextColor = Color.Red;
barImg.DS = GetDSBySale(); // 这里若不设置,则采用默认的
string imgPath = " ../ChartImages/ " + " MyBar.jpg " ;
ChartHelper.CreateChartByBar(barImg, imgPath, ImageFormat.Jpeg);
this .Image1.ImageUrl = imgPath;
}
private DataSet GetDSBySale()
{
string constr = " server=.;database=test;uid=sa;pwd= " ;
SqlConnection con = new SqlConnection(constr);
con.Open();
string cmdStr = " select CountryName,SaleSum from SaleOfCountry " ; // 注意前面第一个字段对应Keys,第二个字段为Values
SqlDataAdapter da = new SqlDataAdapter(cmdStr, con);
DataSet ds = new DataSet();
da.Fill(ds, " SaleOfCountry " );
return ds;
}
}
using System.Drawing;
using System.Drawing.Imaging;
using SkyNet.Chart;
using SkyNet.OA.OAWebUtility;
public partial class SkyNetChart_MyBar : System.Web.UI.Page
{
protected void Page_Load( object sender, EventArgs e)
{
if ( ! IsPostBack)
{
InitChart();
}
}
private void InitChart()
{
Bar barImg = new Bar(); // 定义一个画图类实例
barImg.Title = " 2008年销售情况统计表 " ;
barImg.TextColor = Color.Red;
barImg.DS = GetDSBySale(); // 这里若不设置,则采用默认的
string imgPath = " ../ChartImages/ " + " MyBar.jpg " ;
ChartHelper.CreateChartByBar(barImg, imgPath, ImageFormat.Jpeg);
this .Image1.ImageUrl = imgPath;
}
private DataSet GetDSBySale()
{
string constr = " server=.;database=test;uid=sa;pwd= " ;
SqlConnection con = new SqlConnection(constr);
con.Open();
string cmdStr = " select CountryName,SaleSum from SaleOfCountry " ; // 注意前面第一个字段对应Keys,第二个字段为Values
SqlDataAdapter da = new SqlDataAdapter(cmdStr, con);
DataSet ds = new DataSet();
da.Fill(ds, " SaleOfCountry " );
return ds;
}
}
我这里为了方便就把某些代码写到页面里了,读者请自行考虑!
SkyNet.Chart是一个命名空间,里面有Pie类,随后我将贴出,还包括我后面要讲的Curve类、Bar类等
其中的ChartHelper.CreateChartByPie(pieImg, imgPath, ImageFormat.Jpeg)方法我是在另外一个命名空间里定义的,命名空间是SkyNet.OA.OAWebUtility,随后我也会贴出
下面贴出SkyNet.Chart空间下的Pie类
Code
using System.Drawing;
using System.Data;
namespace SkyNet.Chart
{
public class Pie
{
#region 私有字段
private Graphics objGraphics; //Graphics 类提供将对象绘制到显示设备的方法
private Bitmap objBitmap; //位图对象
private int m_Width = 700; //图像宽度
private int m_Height = 400; //图像高度
private string m_Title = "××公司销售情况统计表";
private string m_Unit = "万元";
//键
private string[] m_Keys = new string[] { "一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月" };
//值
private float[] m_Values = new float[] { 21.5f, 36.2f, 48.7f, 55.4f, 21.6f, 12.8f, 99.5f, 36.4f, 78.2f, 56.4f, 45.8f, 66.4f };
private Color m_BgColor = Color.Snow; //背景
private Color m_TextColor = Color.Black; //文字颜色
private Color m_BorderColor = Color.Black; //整体边框颜色
//Pie颜色数组
private Color[] m_PieColor = new Color[]{Color.Green,Color.Red,Color.Yellow,Color.Blue,Color.Orange,Color.Aqua,
Color.SkyBlue,Color.DeepPink,Color.Teal,Color.Brown,Color.Navy,Color.Pink};
private DataSet m_ds;
private Brush m_titleBrush = Brushes.Black; //标题的画笔颜色
#endregion
#region 属性设置
public DataSet DS
{
get { return m_ds; }
set { m_ds = value; }
}
/// <summary>
/// 标题的画笔颜色
/// </summary>
public Brush TitleBrush
{
get { return m_titleBrush; }
set { m_titleBrush = value; }
}
public string[] Keys
{
set
{
m_Keys = value;
}
get
{
return m_Keys;
}
}
public float[] Values
{
set
{
m_Values = value;
}
get
{
return m_Values;
}
}
public int Width
{
set
{
if (value < 300)
{
m_Width = 300;
}
else
{
m_Width = value;
}
}
get
{
return m_Width;
}
}
public int Height
{
set
{
if (value < 300)
{
m_Height = 300;
}
else
{
m_Height = value;
}
}
get
{
return m_Height;
}
}
public string Title
{
set
{
m_Title = value;
}
get
{
return m_Title;
}
}
public string Unit
{
set
{
m_Unit = value;
}
get
{
return m_Unit;
}
}
public Color BgColor
{
set
{
m_BgColor = value;
}
get
{
return m_BgColor;
}
}
public Color TextColor
{
set
{
m_TextColor = value;
}
get
{
return m_TextColor;
}
}
public Color BorderColor
{
set
{
m_BorderColor = value;
}
get
{
return m_BorderColor;
}
}
public Color[] PieColor
{
set
{
m_PieColor = value;
}
get
{
return m_PieColor;
}
}
#endregion
#region 分配颜色
private Color GetColor(int i) //分配各Pie的颜色
{
try
{
if (0 < i && i < PieColor.Length)
{
return PieColor[i];
}
else if (i >= PieColor.Length)
{
int j = i % PieColor.Length;
return PieColor[j];
}
else
{
return Color.Green;
}
}
catch
{
return Color.Green;
}
}
#endregion
//生成图像并返回bmp图像对象
public Bitmap CreateImage()
{
InitializeGraph();
DrawRight(ref objGraphics);
DrawContent(ref objGraphics);
return objBitmap;
}
//初始化Keys和Values值和填充图像区域,画出边框,初始标题
private void InitializeGraph()
{
//根据DS给Keys和Values赋值
SetKeyValues();
//根据给定的高度和宽度创建一个位图图像
objBitmap = new Bitmap(Width, Height);
//从指定的 objBitmap 对象创建 objGraphics 对象 (即在objBitmap对象中画图)
objGraphics = Graphics.FromImage(objBitmap);
//根据给定颜色(LightGray)填充图像的矩形区域 (背景)
objGraphics.DrawRectangle(new Pen(BorderColor, 1), 0, 0, Width, Height);
objGraphics.FillRectangle(new SolidBrush(BgColor), 1, 1, Width - 2, Height - 2);
//初始化标题
CreateTitle(ref objGraphics);
}
//根据DS给Keys和Values赋值
private void SetKeyValues()
{
if (DS != null)
{
DataTable dt = DS.Tables[0];
DataRow dr;
int rows = dt.Rows.Count;
string[] keys = new string[rows];
float[] values = new float[rows];
for (int i = 0; i < rows; i++)
{
dr = dt.Rows[i];
keys[i] = dr[0].ToString();
values[i] = Convert.ToSingle(dr[1]) / 10000;
}
Keys = keys;
Values = values;
}
else
{
Keys = m_Keys;
Values = m_Values;
}
}
//初始化右边说明部分
private void DrawRight(ref Graphics objGraphics)
{
objGraphics.DrawString(String.Format("单位:{0}", Unit), new Font("宋体", 10), new SolidBrush(TextColor), Width - 95, 30);
Point KeysPoint = new Point(Width - 120, 50);
Point KeysTextPoint = new Point(Width - 90, 50);
for (int i = 0; i < Keys.Length; i++)
{
objGraphics.DrawRectangle(new Pen(BorderColor, 1), KeysPoint.X, KeysPoint.Y, 21, 11);
objGraphics.FillRectangle(new SolidBrush(GetColor(i)), KeysPoint.X, KeysPoint.Y, 20, 10);
objGraphics.DrawString(String.Format("{0} {1}", Keys[i], Values[i]), new Font("宋体", 10), new SolidBrush(TextColor), KeysTextPoint);
KeysPoint.Y += 15;
KeysTextPoint.Y += 15;
}
//画右边的矩形边框(自己画的)
//objGraphics.DrawRectangle(Pens.Black, Width - 130, 0, 130, Height*4/5);
//objGraphics.DrawString("示图", new Font("宋体",12,FontStyle.Bold), Brushes.Red, Width - 130 / 2 - 25, Height * 4 / 5 - 25);
}
private void DrawContent(ref Graphics objGraphics)
{
float Sum = 0;
float StartAngle = 0;
float SweepAngle = 0;
float CircleHeight = 0;
float CircleX = 0;
float CircleY = 0;
for (int i = 0; i < Values.Length; i++)
{
Sum += Values[i];
}
if (Width > Height)
{
CircleHeight = Height - 100;
}
else
{
CircleHeight = Width - 150;
}
CircleX = (Width - 150) / 2 - CircleHeight / 2;
CircleY = Height - 50 - CircleHeight;
for (int i = 0; i < Values.Length; i++)
{
SweepAngle = (Values[i] / Sum) * 360;
objGraphics.DrawPie(new Pen(BorderColor, 1), CircleX, CircleY, CircleHeight, CircleHeight, StartAngle, SweepAngle);
objGraphics.FillPie(new SolidBrush(GetColor(i)), CircleX, CircleY, CircleHeight, CircleHeight, StartAngle, SweepAngle);
StartAngle += SweepAngle;
}
}
//初始化标题
private void CreateTitle(ref Graphics objGraphics)
{
objGraphics.DrawString(Title, new Font("宋体", 16, FontStyle.Bold), TitleBrush, new Point(5, 5));
}
}
}
using System.Drawing;
using System.Data;
namespace SkyNet.Chart
{
public class Pie
{
#region 私有字段
private Graphics objGraphics; //Graphics 类提供将对象绘制到显示设备的方法
private Bitmap objBitmap; //位图对象
private int m_Width = 700; //图像宽度
private int m_Height = 400; //图像高度
private string m_Title = "××公司销售情况统计表";
private string m_Unit = "万元";
//键
private string[] m_Keys = new string[] { "一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月" };
//值
private float[] m_Values = new float[] { 21.5f, 36.2f, 48.7f, 55.4f, 21.6f, 12.8f, 99.5f, 36.4f, 78.2f, 56.4f, 45.8f, 66.4f };
private Color m_BgColor = Color.Snow; //背景
private Color m_TextColor = Color.Black; //文字颜色
private Color m_BorderColor = Color.Black; //整体边框颜色
//Pie颜色数组
private Color[] m_PieColor = new Color[]{Color.Green,Color.Red,Color.Yellow,Color.Blue,Color.Orange,Color.Aqua,
Color.SkyBlue,Color.DeepPink,Color.Teal,Color.Brown,Color.Navy,Color.Pink};
private DataSet m_ds;
private Brush m_titleBrush = Brushes.Black; //标题的画笔颜色
#endregion
#region 属性设置
public DataSet DS
{
get { return m_ds; }
set { m_ds = value; }
}
/// <summary>
/// 标题的画笔颜色
/// </summary>
public Brush TitleBrush
{
get { return m_titleBrush; }
set { m_titleBrush = value; }
}
public string[] Keys
{
set
{
m_Keys = value;
}
get
{
return m_Keys;
}
}
public float[] Values
{
set
{
m_Values = value;
}
get
{
return m_Values;
}
}
public int Width
{
set
{
if (value < 300)
{
m_Width = 300;
}
else
{
m_Width = value;
}
}
get
{
return m_Width;
}
}
public int Height
{
set
{
if (value < 300)
{
m_Height = 300;
}
else
{
m_Height = value;
}
}
get
{
return m_Height;
}
}
public string Title
{
set
{
m_Title = value;
}
get
{
return m_Title;
}
}
public string Unit
{
set
{
m_Unit = value;
}
get
{
return m_Unit;
}
}
public Color BgColor
{
set
{
m_BgColor = value;
}
get
{
return m_BgColor;
}
}
public Color TextColor
{
set
{
m_TextColor = value;
}
get
{
return m_TextColor;
}
}
public Color BorderColor
{
set
{
m_BorderColor = value;
}
get
{
return m_BorderColor;
}
}
public Color[] PieColor
{
set
{
m_PieColor = value;
}
get
{
return m_PieColor;
}
}
#endregion
#region 分配颜色
private Color GetColor(int i) //分配各Pie的颜色
{
try
{
if (0 < i && i < PieColor.Length)
{
return PieColor[i];
}
else if (i >= PieColor.Length)
{
int j = i % PieColor.Length;
return PieColor[j];
}
else
{
return Color.Green;
}
}
catch
{
return Color.Green;
}
}
#endregion
//生成图像并返回bmp图像对象
public Bitmap CreateImage()
{
InitializeGraph();
DrawRight(ref objGraphics);
DrawContent(ref objGraphics);
return objBitmap;
}
//初始化Keys和Values值和填充图像区域,画出边框,初始标题
private void InitializeGraph()
{
//根据DS给Keys和Values赋值
SetKeyValues();
//根据给定的高度和宽度创建一个位图图像
objBitmap = new Bitmap(Width, Height);
//从指定的 objBitmap 对象创建 objGraphics 对象 (即在objBitmap对象中画图)
objGraphics = Graphics.FromImage(objBitmap);
//根据给定颜色(LightGray)填充图像的矩形区域 (背景)
objGraphics.DrawRectangle(new Pen(BorderColor, 1), 0, 0, Width, Height);
objGraphics.FillRectangle(new SolidBrush(BgColor), 1, 1, Width - 2, Height - 2);
//初始化标题
CreateTitle(ref objGraphics);
}
//根据DS给Keys和Values赋值
private void SetKeyValues()
{
if (DS != null)
{
DataTable dt = DS.Tables[0];
DataRow dr;
int rows = dt.Rows.Count;
string[] keys = new string[rows];
float[] values = new float[rows];
for (int i = 0; i < rows; i++)
{
dr = dt.Rows[i];
keys[i] = dr[0].ToString();
values[i] = Convert.ToSingle(dr[1]) / 10000;
}
Keys = keys;
Values = values;
}
else
{
Keys = m_Keys;
Values = m_Values;
}
}
//初始化右边说明部分
private void DrawRight(ref Graphics objGraphics)
{
objGraphics.DrawString(String.Format("单位:{0}", Unit), new Font("宋体", 10), new SolidBrush(TextColor), Width - 95, 30);
Point KeysPoint = new Point(Width - 120, 50);
Point KeysTextPoint = new Point(Width - 90, 50);
for (int i = 0; i < Keys.Length; i++)
{
objGraphics.DrawRectangle(new Pen(BorderColor, 1), KeysPoint.X, KeysPoint.Y, 21, 11);
objGraphics.FillRectangle(new SolidBrush(GetColor(i)), KeysPoint.X, KeysPoint.Y, 20, 10);
objGraphics.DrawString(String.Format("{0} {1}", Keys[i], Values[i]), new Font("宋体", 10), new SolidBrush(TextColor), KeysTextPoint);
KeysPoint.Y += 15;
KeysTextPoint.Y += 15;
}
//画右边的矩形边框(自己画的)
//objGraphics.DrawRectangle(Pens.Black, Width - 130, 0, 130, Height*4/5);
//objGraphics.DrawString("示图", new Font("宋体",12,FontStyle.Bold), Brushes.Red, Width - 130 / 2 - 25, Height * 4 / 5 - 25);
}
private void DrawContent(ref Graphics objGraphics)
{
float Sum = 0;
float StartAngle = 0;
float SweepAngle = 0;
float CircleHeight = 0;
float CircleX = 0;
float CircleY = 0;
for (int i = 0; i < Values.Length; i++)
{
Sum += Values[i];
}
if (Width > Height)
{
CircleHeight = Height - 100;
}
else
{
CircleHeight = Width - 150;
}
CircleX = (Width - 150) / 2 - CircleHeight / 2;
CircleY = Height - 50 - CircleHeight;
for (int i = 0; i < Values.Length; i++)
{
SweepAngle = (Values[i] / Sum) * 360;
objGraphics.DrawPie(new Pen(BorderColor, 1), CircleX, CircleY, CircleHeight, CircleHeight, StartAngle, SweepAngle);
objGraphics.FillPie(new SolidBrush(GetColor(i)), CircleX, CircleY, CircleHeight, CircleHeight, StartAngle, SweepAngle);
StartAngle += SweepAngle;
}
}
//初始化标题
private void CreateTitle(ref Graphics objGraphics)
{
objGraphics.DrawString(Title, new Font("宋体", 16, FontStyle.Bold), TitleBrush, new Point(5, 5));
}
}
}
至此,Pie结束
下面贴出ChartHelper类
public
class
ChartHelper
{
/// <summary>
/// 创建一个Pie图--圆饼图
/// </summary>
/// <param name="pieImg"> Pie类的实例(设置标题、宽度、高度等) </param>
/// <param name="imgPath"> 生成Pie图的图片路径(相对路径) </param>
/// <param name="imgFormat"> 生成Pie图的图片格式(如:ImageFormat.Jpeg) </param>
public static void CreateChartByPie(Pie pieImg, string imgPath,ImageFormat imgFormat)
{
try
{
if (pieImg == null )
{
pieImg.Title = " Pie图统计表示例 " ;
pieImg.TitleBrush = Brushes.Red;
pieImg.Width = 800 ;
pieImg.Height = 500 ;
}
Bitmap bmp = pieImg.CreateImage();
string savePath = HttpContext.Current.Server.MapPath(imgPath);
bmp.Save(savePath, imgFormat);
}
catch (Exception ee)
{
throw ee;
}
}
}
{
/// <summary>
/// 创建一个Pie图--圆饼图
/// </summary>
/// <param name="pieImg"> Pie类的实例(设置标题、宽度、高度等) </param>
/// <param name="imgPath"> 生成Pie图的图片路径(相对路径) </param>
/// <param name="imgFormat"> 生成Pie图的图片格式(如:ImageFormat.Jpeg) </param>
public static void CreateChartByPie(Pie pieImg, string imgPath,ImageFormat imgFormat)
{
try
{
if (pieImg == null )
{
pieImg.Title = " Pie图统计表示例 " ;
pieImg.TitleBrush = Brushes.Red;
pieImg.Width = 800 ;
pieImg.Height = 500 ;
}
Bitmap bmp = pieImg.CreateImage();
string savePath = HttpContext.Current.Server.MapPath(imgPath);
bmp.Save(savePath, imgFormat);
}
catch (Exception ee)
{
throw ee;
}
}
}
好到此,画图全部结束,如果以上您有看不懂的,请留言或发Email