当前位置:首页 > ASP.NET实例:ASP.NET画图系列之实现Curve图(曲线图)

ASP.NET实例:ASP.NET画图系列之实现Curve图(曲线图)

点击次数:1546  更新日期:2010-12-31
\n

ASP.NET画图系列之实现Curve图(曲线图),今天要实现的是Curve图,先看下效果:


\n


\n

页面部分,还是和Pie一样


\n

<form id=”form1″ runat=”server”>
<div>
<asp:Image ID=”Image1″ runat=”server” />
</div>
</form>


\n

cs代码:


\n

using System.Drawing; //Bitmap
using System.Drawing.Imaging; //ImageFormat
using SkyNet.Chart;
using SkyNet.OA.OAWebUtility;


\n


public partial class SkyNetChart_MyCurve : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
InitChart();
}
}
private void InitChart()
{
Curve curveImg = new Curve(); //定义一个画图类实例
curveImg.Title = “2008年销售情况统计表”;
curveImg.Width = 900;
curveImg.Height = 500;
curveImg.TextColor = Color.Red;


\n

string imgPath = “../ChartImages/” + “MyCurve.jpg”;
string savePath = Server.MapPath(imgPath);
ChartHelper.CreateChartByCurve(curveImg, imgPath, ImageFormat.Jpeg);
this.Image1.ImageUrl = imgPath;
}


\n

}


\n


上面有不明白的地方,请参照ASP.NET画图系列之实现Pie图(圆饼图)
接下来是Curve类


\n

Code
#region 私有字段
private Graphics objGraphics; //Graphics 类提供将对象绘制到显示设备的方法
private Bitmap objBitmap; //位图对象


\n

private int m_Width = 900; //图像宽度
private int m_Height = 500; //图像高度
private float m_XSlice = 50; //X轴刻度宽度
private float m_YSlice = 50; //Y轴刻度宽度
private float m_YSliceValue = 20; //Y轴刻度的数值宽度
private float m_YSliceBegin = 0; //Y轴刻度开始值
private float m_Tension = 0.5f;
private string m_Title = “××公司销售情况曲线图”; //Title
private string m_Unit = “万元”; //单位
private string m_XAxisText = “月份”; //X轴说明文字
private string m_YAxisText = “万元”; //Y轴说明文字
private string[] m_Keys = new string[] { “一月”, “二月”, “三月”, “四月”, “五月”, “六月”, “七月”, “八月”, “九月”, “十月”, “十一月”, “十二月” }; //键
private float[] m_Values = new float[] { 20.0f, 30.0f, 50.0f, 55.4f, 21.6f, 12.8f, 99.5f, 36.4f, 78.2f, 56.4f, 45.8f, 66.5f }; //值
private Color m_BgColor = Color.Snow; //背景
private Color m_TextColor = Color.Black; //文字颜色
private Color m_BorderColor = Color.Black; //整体边框颜色
private Color m_AxisColor = Color.Black; //轴线颜色
private Color m_AxisTextColor = Color.Black; //轴说明文字颜色
private Color m_SliceTextColor = Color.Black; //刻度文字颜色
private Color m_SliceColor = Color.Black; //刻度颜色
private Color m_CurveColor = Color.Red; //曲线颜色


\n

private DataSet m_ds;
#endregion


\n

#region 属性
public DataSet DS
{
get { return m_ds; }
set { m_ds = value; }
}
public int Width
{
set
{
if (value < 300)
{
m_Width = 300;
}
else
{
m_Width = value;
}
}
get
{
return m_Width;
}
}


\n

public int Height
{
set
{
if (value < 300)
{
m_Height = 300;
}
else
{
m_Height = value;
}
}
get
{
return m_Height;
}
}


\n

public float XSlice
{
set
{
m_XSlice = value;
}
get
{
return m_XSlice;
}
}


\n

public float YSlice
{
set
{
m_YSlice = value;
}
get
{
return m_YSlice;
}
}


\n

public float YSliceValue
{
set
{
m_YSliceValue = value;
}
get
{
return m_YSliceValue;
}
}


\n

public float YSliceBegin
{
set
{
m_YSliceBegin = value;
}
get
{
return m_YSliceBegin;
}
}


\n

public float Tension
{
set
{
if (value < 0.0f && value > 1.0f)
{
m_Tension = 0.5f;
}
else
{
m_Tension = value;
}
}
get
{
return m_Tension;
}
}


\n

public string Title
{
set
{
m_Title = value;
}
get
{
return m_Title;
}
}


\n

public string Unit
{
set
{
m_Unit = value;
}
get
{
return m_Unit;
}
}


\n

public string[] Keys
{
set
{
m_Keys = value;
}
get
{
return m_Keys;
}
}


\n

public float[] Values
{
set
{
m_Values = value;
}
get
{
return m_Values;
}
}


\n

public Color BgColor
{
set
{
m_BgColor = value;
}
get
{
return m_BgColor;
}
}


\n

public Color TextColor
{
set
{
m_TextColor = value;
}
get
{
return m_TextColor;
}
}


\n

public Color BorderColor
{
set
{
m_BorderColor = value;
}
get
{
return m_BorderColor;
}
}


\n

public Color AxisColor
{
set
{
m_AxisColor = value;
}
get
{
return m_AxisColor;
}
}


\n

public string XAxisText
{
set
{
m_XAxisText = value;
}
get
{
return m_XAxisText;
}
}


\n

public string YAxisText
{
set
{
m_YAxisText = value;
}
get
{
return m_YAxisText;
}
}


\n

public Color AxisTextColor
{
set
{
m_AxisTextColor = value;
}
get
{
return m_AxisTextColor;
}
}


\n

public Color SliceTextColor
{
set
{
m_SliceTextColor = value;
}
get
{
return m_SliceTextColor;
}
}


\n

public Color SliceColor
{
set
{
m_SliceColor = value;
}
get
{
return m_SliceColor;
}
}


\n

public Color CurveColor
{
set
{
m_CurveColor = value;
}
get
{
return m_CurveColor;
}
}
#endregion


\n

//生成图像并返回bmp图像对象
public Bitmap CreateImage()
{
InitializeGraph();


\n

DrawContent(ref objGraphics);


\n

return objBitmap;
}


\n

//初始化和填充图像区域,画出边框,初始标题
private void InitializeGraph()
{


\n

//根据DS给Keys和Values赋值
SetKeyValues();


\n

//根据给定的高度和宽度创建一个位图图像
objBitmap = new Bitmap(Width, Height);


\n

//从指定的 objBitmap 对象创建 objGraphics 对象 (即在objBitmap对象中画图)
objGraphics = Graphics.FromImage(objBitmap);


\n

//根据给定颜色(LightGray)填充图像的矩形区域 (背景)
objGraphics.DrawRectangle(new Pen(BorderColor, 1), 0, 0, Width, Height);
objGraphics.FillRectangle(new SolidBrush(BgColor), 1, 1, Width – 2, Height – 2);


\n


//画X轴,pen,x1,y1,x2,y2 注意图像的原始X轴和Y轴计算是以左上角为原点,向右和向下计算的
objGraphics.DrawLine(new Pen(new SolidBrush(AxisColor), 1), 100, Height – 100, Width – 75, Height – 100);


\n

//画Y轴,pen,x1,y1,x2,y2
objGraphics.DrawLine(new Pen(new SolidBrush(AxisColor), 1), 100, Height – 100, 100, 75);


\n

//初始化轴线说明文字
SetAxisText(ref objGraphics);


\n

//初始化X轴上的刻度和文字
SetXAxis(ref objGraphics);


\n

//初始化Y轴上的刻度和文字
SetYAxis(ref objGraphics);


\n

//初始化标题
CreateTitle(ref objGraphics);
}


\n

//根据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 SetAxisText(ref Graphics objGraphics)
{
objGraphics.DrawString(XAxisText, new Font(“宋体”, 10), new SolidBrush(AxisTextColor), Width / 2 – 50, Height – 50);


\n

int X = 30;
int Y = (Height / 2) – 50;
for (int i = 0; i < YAxisText.Length; i++)
{
objGraphics.DrawString(YAxisText[i].ToString(), new Font(“宋体”, 10), new SolidBrush(AxisTextColor), X, Y);
Y += 15;
}
}


\n

private void SetXAxis(ref Graphics objGraphics)
{
int x1 = 100;
int y1 = Height – 110;
int x2 = 100;
int y2 = Height – 90;
int iCount = 0;
int iSliceCount = 1;
float Scale = 0;
int iWidth = (int)((Width – 200) * (50 / XSlice));


\n

objGraphics.DrawString(Keys[0].ToString(), new Font(“宋体”, 10), new SolidBrush(SliceTextColor), 85, Height – 90);


\n

for (int i = 0; i <= iWidth; i += 10)
{
Scale = i * (XSlice / 50);


\n

if (iCount == 5)
{
objGraphics.DrawLine(new Pen(new SolidBrush(AxisColor)), x1 + Scale, y1, x2 + Scale, y2);
//The Point!这里显示X轴刻度
if (iSliceCount <= Keys.Length – 1)
{
objGraphics.DrawString(Keys[iSliceCount].ToString(), new Font(“宋体”, 10), new SolidBrush(SliceTextColor), x1 + Scale – 15, y2);
}
else
{
//超过范围,不画任何刻度文字
}
iCount = 0;
iSliceCount++;
if (x1 + Scale > Width – 100)
{
break;
}
}
else
{
objGraphics.DrawLine(new Pen(new SolidBrush(SliceColor)), x1 + Scale, y1 + 5, x2 + Scale, y2 – 5);
}
iCount++;
}
}


\n

private void SetYAxis(ref Graphics objGraphics)
{
int x1 = 95;
int y1 = (int)(Height – 100 – 10 * (YSlice / 50));
int x2 = 105;
int y2 = (int)(Height – 100 – 10 * (YSlice / 50));
int iCount = 1;
float Scale = 0;
int iSliceCount = 1;


\n

int iHeight = (int)((Height – 200) * (50 / YSlice));


\n

objGraphics.DrawString(YSliceBegin.ToString(), new Font(“宋体”, 10), new SolidBrush(SliceTextColor), 60, Height – 110);


\n

for (int i = 0; i < iHeight; i += 10)
{
Scale = i * (YSlice / 50);


\n

if (iCount == 5)
{
objGraphics.DrawLine(new Pen(new SolidBrush(AxisColor)), x1 – 5, y1 – Scale, x2 + 5, y2 – Scale);
//The Point!这里显示Y轴刻度
objGraphics.DrawString(Convert.ToString(YSliceValue * iSliceCount + YSliceBegin), new Font(“宋体”, 10), new SolidBrush(SliceTextColor), 60, y1 – Scale);


\n

iCount = 0;
iSliceCount++;
}
else
{
objGraphics.DrawLine(new Pen(new SolidBrush(SliceColor)), x1, y1 – Scale, x2, y2 – Scale);
}
iCount++;
}
}


\n

private void DrawContent(ref Graphics objGraphics)
{
if (Keys.Length == Values.Length)
{
Pen CurvePen = new Pen(CurveColor, 1);
PointF[] CurvePointF = new PointF[Keys.Length];
float keys = 0;
float values = 0;
float Offset1 = (Height – 100) + YSliceBegin;
float Offset2 = (YSlice / 50) * (50 / YSliceValue);


\n

for (int i = 0; i < Keys.Length; i++)
{
keys = XSlice * i + 100;
values = Offset1 – Values[i] * Offset2;
CurvePointF[i] = new PointF(keys, values);
}
objGraphics.DrawCurve(CurvePen, CurvePointF, Tension);
}
else
{
objGraphics.DrawString(“Error!The length of Keys and Values must be same!”, new Font(“宋体”, 16), new SolidBrush(TextColor), new Point(150, Height / 2));
}
}


\n

//初始化标题
private void CreateTitle(ref Graphics objGraphics)
{
objGraphics.DrawString(Title, new Font(“宋体”, 16), new SolidBrush(TextColor), new Point(5, 5));
}


\n

下面是CreateChartByCurve方法:


\n

/// <summary>
/// 创建一个Curve图–曲线图
/// </summary>
/// <param name=”curveImg”>Curve类的实例(设置标题、宽度、高度等)</param>
/// <param name=”imgPath”>生成Curve图的图片路径(相对路径)</param>
/// <param name=”imgFormat”>生成Curve图的图片格式(如:ImageFormat.Jpeg)</param>
public static void CreateChartByCurve(Curve curveImg, string imgPath, ImageFormat imgFormat)
{
try
{
if (curveImg == null)
{
curveImg.Title = “Curve图统计表示例”;
curveImg.Width = 900;
curveImg.Height = 500;
curveImg.TextColor = Color.Red;
}
Bitmap bmp = curveImg.CreateImage();
string savePath = HttpContext.Current.Server.MapPath(imgPath);
bmp.Save(savePath, imgFormat);
}
catch (Exception ee)
{
throw ee;
}
}


\n


好Curve图也已经画好了


\n

作者:http://www.cnblogs.com/gfreesky

\n