ASP.Net绘制柱状图和曲线图示例
|
ASP.Net绘制柱状图和曲线图示例
public class WebForm1 : System.Web.UI.Page { private void Page_Load(object sender, System.EventArgs e) { //This is the interface to outer usage int widthValue = 800; int heightValue = 500; String xTitle,yTitle; int offsetX = 20; int offsetY = 20; //柱状图之间的间距 int spaceSpan = 15; xTitle = "Time"; yTitle = "Sum"; Bitmap imgBitmap = new Bitmap(widthValue+5*offsetX,heightValue+offsetY*2,PixelFormat.Format32bppPArgb); Graphics g = Graphics.FromImage(imgBitmap); g.Clear(Color.Snow); Pen linePen = new Pen(Color.Black); linePen.Width = 2; //Draw Title Font txtFont = new Font("Courier",10,GraphicsUnit.Point); String title= "This is the title to be displayed"; g.DrawString(title,txtFont,Brushes.Blue,new PointF(imgBitmap.Width/2,0)); Point original = new Point(offsetX,heightValue+offsetY); Point xEndPonit = new Point(widthValue+offsetX ,heightValue+offsetY); Point yEndPonit = new Point(offsetX,0); //X coordinate g.DrawLine(linePen,original,xEndPonit); //Y Coordinate g.DrawLine(linePen,original,yEndPonit); //Draw arrows Point leftArrowStart = new Point(offsetX*3/4 ,offsetY/3); Point rightArrowEnd = new Point(offsetX*5/4,offsetY/3); g.DrawLine(linePen,leftArrowStart,yEndPonit); g.DrawLine(linePen,yEndPonit,rightArrowEnd); Point topArrowStart = new Point(widthValue + offsetX*3/4,heightValue + offsetY*3/4); Point bottomArrowEnd = new Point(widthValue+ offsetX*3/4,heightValue + offsetY*5/4); g.DrawLine(linePen,topArrowStart,xEndPonit); g.DrawLine(linePen,xEndPonit,bottomArrowEnd); //Draw X-Title g.DrawString(xTitle,txtFont,Brushes.Blue,new PointF(bottomArrowEnd.X-g.MeasureString(xTitle,txtFont).Width,topArrowStart.Y +10)); StringFormat f = new StringFormat(); //f.Alignment = StringAlignment.Center; //Draw Y-Title f.LineAlignment = StringAlignment.Center; g.DrawString(yTitle,txtFont,Brushes.Blue,new PointF(offsetX * 5/3,15),f); //画单个柱状图的代码 //测试数据 /** int[] staticData = new int[]{20,30,80,50,200,120,20,30,80,50,200,120,60,90,140}; int maxValue = MaxValue(staticData); int ratio = heightValue/maxValue; int groupCount = staticData.Length; //柱状图组数 ResetValue(staticData,ratio); int rectWidth = (widthValue - (groupCount +1)*spaceSpan )/ groupCount; Rectangle rect; int startX = offsetX + spaceSpan; //起始坐标点 for(int i=0;i { rect = new Rectangle(startX,heightValue +offsetY - staticData ,rectWidth,staticData); g.DrawRectangle(Pens.Green,rect); g.FillRectangle(Brushes.Green,rect); startX = startX + rectWidth + spaceSpan; } **/ // Type t = dataList.GetType(); // if(t.IsArray) // { // } //画分组柱状图代码 ArrayList dataList = new ArrayList(); int[] data1= new int[]{20,30,50,100}; int[] data2 = new int[]{50,60,30,30}; int[] data3 = new int[]{80,50,60,85}; int[] data4= new int[]{20,30,90,58}; int[] data5 = new int[]{50,60,30,30}; int[] data6 = new int[]{80,50,60,85}; int[] data7= new int[]{20,30,90,58}; dataList.Add(data1); dataList.Add(data2); dataList.Add(data3); dataList.Add(data4); dataList.Add(data5); dataList.Add(data6); dataList.Add(data7); int maxValue = MaxValue(dataList); int ratio = heightValue/maxValue; int groupCount = dataList.Count; //柱状图组数 ResetValue(dataList,ratio); //根据比率画坐标 //Draw X-Grids, The height value is divided into 10 parts int heightStep = heightValue/10; Point point1,point2; for(int i=1;i<=10;i++) { point1 = new Point(offsetX*3/4,offsetY+heightValue - heightStep*i); point2 = new Point(offsetX,point1.Y); g.DrawLine(Pens.Black,point1,point2); String text = maxValue/10*i+""; g.DrawString(text,txtFont,Brushes.Blue,new PointF(-2,point1.Y)); } //画坐标结束 int rectWidth = (widthValue - (groupCount +1)*spaceSpan )/ groupCount; int innerGroupCount = GetInnerGroupCount(dataList); int innerWidth = rectWidth / innerGroupCount; Rectangle rect; int startX = offsetX + spaceSpan; //起始坐标点 for(int i=0;i { int[] staticData = (int[])dataList; for(int j=0;j { rect = new Rectangle(startX,heightValue +offsetY - staticData[j],innerWidth,staticData[j]); g.DrawRectangle(GetPenColor(j),rect); g.FillRectangle(GetBrushColor(j),rect); startX = startX + innerWidth; } startX = startX + spaceSpan; } //画曲线 Point pnt1 = new Point(200+offsetX,heightValue+offsetY-300); Point pnt2 = new Point(300+offsetX,heightValue+offsetY-500); Point pnt3 = new Point(400+offsetX,heightValue+offsetY-300); Point pnt4 = new Point(600+offsetX,heightValue+offsetY-600); g.DrawCurve(Pens.Purple,new Point[]{pnt1,pnt2,pnt3,pnt4}); //画饼图 g.DrawPie ( Pens.Red , 50 , 50 , 150 , 150 , 0 , 30 ) ; imgBitmap.Save(Response.OutputStream,ImageFormat.Gif); } 代码中涉及到的函数如下： private int MaxValue(int[] data) { int maxValue = 0; for(int i=0;i { if(data>maxValue) maxValue = data; } return maxValue; } private int MaxValue(ArrayList dataList) { int maxValue = 0; for(int i=0;i { int newMaxValue = MaxValue((int[])dataList); if( newMaxValue>maxValue) maxValue = newMaxValue; } return maxValue; } private void ResetValue(int[] data,int ratio) { for(int i=0;i data *= ratio; } private void ResetValue(ArrayList dataList,int ratio) { for(int i=0;i { ResetValue((int[])dataList,ratio); } } private int GetInnerGroupCount(ArrayList dataList) { int groupCount = 0; for(int i=0;i { int count = ((int[])dataList).Length; if(count>groupCount) groupCount = count; } return groupCount; } private Pen GetPenColor(int index) { Pen linePen = new Pen(Color.Black); linePen.Width = 1; linePen.CompoundArray = new float[]{0.0F,0.2F}; switch(index) { case 0: linePen.Color = Color.Gray; break; case 1: linePen.Color = Color.Green; break; case 2: linePen.Color = Color.Blue; break; case 3: linePen.Color = Color.Purple; break; } return linePen; } private Brush GetBrushColor(int index) { switch(index) { case 0: return Brushes.Gray; case 1: return Brushes.Green; case 2: return Brushes.Blue; case 3: return Brushes.Purple; } return Brushes.Red; } ------------------------------------------------------------
多多交流！
|
|
 dgjdgj
|
回复：ASP.Net绘制柱状图和曲线图示例不错，好像少了一些明显的代码，调试了一下，如下： public partial class Default2 : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { int widthvalue = 800; int heightvalue = 500; string xTile, yTitle; int offsetX = 20; int offsetY = 20; //柱状之间的间距 int spaceSpan = 15; xTile = "Title"; yTitle = "Sum"; Bitmap imgbitmap = new Bitmap(widthvalue + 5 * offsetX, heightvalue + 2 * offsetY, PixelFormat.Format32bppArgb); Graphics g = Graphics.FromImage(imgbitmap); g.Clear(Color.Snow); Pen linePen = new Pen(Color.Black); linePen.Width = 2; //Draw Title Font txtFont = new Font("Courier", 10, GraphicsUnit.Point); String title = "This is the title to be displayed"; g.DrawString(title, txtFont, Brushes.Blue, new PointF(imgbitmap.Width / 2, 0)); Point original = new Point(offsetX, heightvalue + offsetY); Point xEndPonit = new Point(widthvalue + offsetX, heightvalue + offsetY); Point yEndPonit = new Point(offsetX, 0); //X coordinate g.DrawLine(linePen, original, xEndPonit); //Y Coordinate g.DrawLine(linePen, original, yEndPonit); //Draw arrows Point leftArrowStart = new Point(offsetX * 3 / 4, offsetY / 3); Point rightArrowEnd = new Point(offsetX * 5 / 4, offsetY / 3); g.DrawLine(linePen, leftArrowStart, yEndPonit); g.DrawLine(linePen, yEndPonit, rightArrowEnd); Point topArrowStart = new Point(widthvalue + offsetX * 3 / 4, heightvalue + offsetY * 3 / 4); Point bottomArrowEnd = new Point(widthvalue + offsetX * 3 / 4, heightvalue + offsetY * 5 / 4); g.DrawLine(linePen, topArrowStart, xEndPonit); g.DrawLine(linePen, xEndPonit, bottomArrowEnd); //Draw X-Title g.DrawString(xTile, txtFont, Brushes.Blue, new PointF(bottomArrowEnd.X - g.MeasureString(xTile, txtFont).Width, topArrowStart.Y + 10)); StringFormat f = new StringFormat(); //f.Alignment = StringAlignment.Center; //Draw Y-Title f.LineAlignment = StringAlignment.Center; g.DrawString(yTitle, txtFont, Brushes.Blue, new PointF(offsetX * 5 / 3, 15), f); //画单个柱状图的代码 //测试数据 /** int[] staticData = new int[]{20,30,80,50,200,120,20,30,80,50,200,120,60,90,140}; int maxValue = MaxValue(staticData); int ratio = heightvalue/maxValue; int groupCount = staticData.Length; //柱状图组数 ResetValue(staticData,ratio); int rectWidth = (widthvalue - (groupCount +1)*spaceSpan )/ groupCount; Rectangle rect; int startX = offsetX + spaceSpan; //起始坐标点 for(int i=0;i { rect = new Rectangle(startX,heightvalue +offsetY - staticData ,rectWidth,staticData); g.DrawRectangle(Pens.Green,rect); g.FillRectangle(Brushes.Green,rect); startX = startX + rectWidth + spaceSpan; } **/ // Type t = dataList.GetType(); // if(t.IsArray) // { // } //画分组柱状图代码 ArrayList dataList = new ArrayList(); int[] data1 = new int[] { 20, 30, 50, 100 }; int[] data2 = new int[] { 50, 60, 30, 30 }; int[] data3 = new int[] { 80, 50, 60, 85 }; int[] data4 = new int[] { 20, 30, 90, 58 }; int[] data5 = new int[] { 50, 60, 30, 30 }; int[] data6 = new int[] { 80, 50, 60, 85 }; int[] data7 = new int[] { 20, 30, 90, 58 }; dataList.Add(data1); dataList.Add(data2); dataList.Add(data3); dataList.Add(data4); dataList.Add(data5); dataList.Add(data6); dataList.Add(data7); int maxValue = MaxValue(dataList); int ratio = heightvalue / maxValue; int groupCount = dataList.Count; //柱状图组数 ResetValue(dataList, ratio); //根据比率画坐标 //Draw X-Grids, The height value is divided into 10 parts int heightStep = heightvalue / 10; Point point1, point2; for (int i = 1; i <= 10; i++) { point1 = new Point(offsetX * 3 / 4, offsetY + heightvalue - heightStep * i); point2 = new Point(offsetX, point1.Y); g.DrawLine(Pens.Black, point1, point2); String text = maxValue / 10 * i + ""; g.DrawString(text, txtFont, Brushes.Blue, new PointF(-2, point1.Y)); } //画坐标结束 int rectWidth = (widthvalue - (groupCount +1)*spaceSpan )/ groupCount; int innerGroupCount = GetInnerGroupCount(dataList); int innerWidth = rectWidth / innerGroupCount; Rectangle rect; int startX = offsetX + spaceSpan; //起始坐标点 for(int i=0;i<dataList.Count;i++) { int[] staticData = (int[])dataList; for(int j=0;j<staticData.Length;j++) { rect = new Rectangle(startX,heightvalue +offsetY - staticData[j],innerWidth,staticData[j]); g.DrawRectangle(GetPenColor(j),rect); g.FillRectangle(GetBrushColor(j),rect); startX = startX + innerWidth; } startX = startX + spaceSpan; } //画曲线 Point pnt1 = new Point(200+offsetX,heightvalue+offsetY-300); Point pnt2 = new Point(300+offsetX,heightvalue+offsetY-500); Point pnt3 = new Point(400+offsetX,heightvalue+offsetY-300); Point pnt4 = new Point(600+offsetX,heightvalue+offsetY-600); g.DrawCurve(Pens.Purple,new Point[]{pnt1,pnt2,pnt3,pnt4}); //g.DrawCurve(Pens.Purple,new Point[]{pnt1,pnt2,pnt3,pnt4}); //画饼图 g.DrawPie ( Pens.Red , 50 , 50 , 150 , 150 , 0 , 30 ) ; imgbitmap.Save(Response.OutputStream,ImageFormat.Gif); } private int MaxValue(int[] data) { int maxValue = 0; for(int i=0;i<data.Length;i++) { if(data>maxValue) maxValue = data; } return maxValue; } private int MaxValue(ArrayList dataList) { int maxValue = 0; for (int i = 0; i < dataList.Count; i++) { int newMaxValue = MaxValue((int[])dataList); if (newMaxValue > maxValue) maxValue = newMaxValue; } return maxValue; } private void ResetValue(int[] data, int ratio) { for (int i = 0; i < data.Length; i++) data *= ratio; } private void ResetValue(ArrayList dataList, int ratio) { for (int i = 0; i < dataList.Count; i++) { ResetValue((int[])dataList, ratio); } } private int GetInnerGroupCount(ArrayList dataList) { int groupCount = 0; for (int i = 0; i < dataList.Count; i++) { int count = ((int[])dataList).Length; if (count > groupCount) groupCount = count; } return groupCount; } private Pen GetPenColor(int index) { Pen linePen = new Pen(Color.Black); linePen.Width = 1; linePen.CompoundArray = new float[] { 0.0F, 0.2F }; switch (index) { case 0: linePen.Color = Color.Gray; break; case 1: linePen.Color = Color.Green; break; case 2: linePen.Color = Color.Blue; break; case 3: linePen.Color = Color.Purple; break; } return linePen; } private Brush GetBrushColor(int index) { switch (index) { case 0: return Brushes.Gray; case 1: return Brushes.Green; case 2: return Brushes.Blue; case 3: return Brushes.Purple; } return Brushes.Red; } } |
