条形图和饼图是都要调用数据库 而折线图则是直接显示不用调用数据库
打开vs 工具 分别创建三中图形的类 (BarChart、PieChart、zexian)ChartUtil类控制颜色
再建一个aspx 文件在后置文件中调用这个几个类中的方法 本文章中有调用
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Data;//用于数据访问
using System.Drawing;//提供画GDI+图形的基本功能
using System.Drawing.Text;//提供画GDI+图形的高级功能
using System.Drawing.Drawing2D;//提供画高级二维,矢量图形功能
using System.Drawing.Imaging;
using System.IO;//提供画GDI+图形的高级功能
namespace Insight_cs.WebCharts
{
public class BarChart
{
public BarChart()
{
}
public void Render(string title, string subTitle, int width, int height, DataSet chartData, Stream target)
{
const int SIDE_LENGTH = 400;
const int CHART_TOP = 75;
const int CHART_HEIGHT = 200;
const int CHART_LEFT = 50;
const int CHART_WIDTH = 300;
DataTable dt = chartData.Tables[0];
//计算最高的点
float highPoint = 0; //y轴最高点
foreach (DataRow dr in dt.Rows)
{
if (highPoint < Convert.ToSingle(dr[1]))
{
highPoint = Convert.ToSingle(dr[1]);
}
}
//建立一个Graphics对象实例
Bitmap bm = new Bitmap(width, height);
Graphics g = Graphics.FromImage(bm);
//设置条图图形和文字属性
//(Convert.ToSingle(width)将int 型类型对象转换为float类型
g.ScaleTransform((Convert.ToSingle(width)) / SIDE_LENGTH, (Convert.ToSingle(height)) / SIDE_LENGTH);
g.SmoothingMode = SmoothingMode.Default;
g.TextRenderingHint = TextRenderingHint.AntiAlias;
//设定画布和边
g.Clear(Color.White);
g.DrawRectangle(Pens.Black, 0, 0, SIDE_LENGTH - 1, SIDE_LENGTH - 1);
//画大标题
g.DrawString(title, new Font("Tahoma", 24), Brushes.Black, new PointF(5, 5));
//画小标题
g.DrawString(subTitle, new Font("Tahoma", 14), Brushes.Black, new PointF(7, 35));
//画条形图
float barWidth = CHART_WIDTH / (dt.Rows.Count * 2);
PointF barOrigin = new PointF(CHART_LEFT + (barWidth / 2), 0);
float barHeight = dt.Rows.Count;
for (int i = 0; i < dt.Rows.Count; i++)
{
barHeight = Convert.ToSingle(dt.Rows[i][1]) * 200 / highPoint;
barOrigin.Y = CHART_TOP + CHART_HEIGHT - barHeight;
g.FillRectangle(new SolidBrush(ChartUtil.GetChartItemColor(i)), barOrigin.X, barOrigin.Y, barWidth, barHeight);
barOrigin.X = barOrigin.X + (barWidth * 2);
}
//设置边
g.DrawLine(new Pen(Color.Black, 2), new Point(CHART_LEFT, CHART_TOP), new Point(CHART_LEFT, CHART_TOP + CHART_HEIGHT));
g.DrawLine(new Pen(Color.Black, 2), new Point(CHART_LEFT, CHART_TOP + CHART_HEIGHT), new Point(CHART_LEFT + CHART_WIDTH, CHART_TOP + CHART_HEIGHT));
//画图例框和文字
g.DrawRectangle(new Pen(Color.Black, 1), 200, 300, 199, 99);
g.DrawString("Legend", new Font("Tahoma", 12, FontStyle.Bold), Brushes.Black, new PointF(200, 300));
//画图例 右下角的图例
PointF boxOrigin = new PointF(210, 330);
PointF textOrigin = new PointF(235, 326);
for (int i = 0; i < dt.Rows.Count; i++)
{
g.FillRectangle(new SolidBrush(ChartUtil.GetChartItemColor(i)), boxOrigin.X, boxOrigin.Y, 20, 10);
g.DrawRectangle(Pens.Black, boxOrigin.X, boxOrigin.Y, 20, 10);
g.DrawString(dt.Rows[i][0].ToString() + " - " + dt.Rows[i][1].ToString(), new Font("Tahoma", 10), Brushes.Black, textOrigin);
boxOrigin.Y += 15;
textOrigin.Y += 15;
}
//输出图形
bm.Save(target, ImageFormat.Gif);
//资源回收
bm.Dispose();
g.Dispose();
}
}
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Data;//用于数据访问
using System.Drawing;//提供画GDI+图形的基本功能
using System.Drawing.Text;//提供画GDI+图形的高级功能
using System.Drawing.Drawing2D;//提供画高级二维,矢量图形功能
using System.Drawing.Imaging;
using System.IO;//提供画GDI+图形的高级功能
namespace Insight_cs.WebCharts
{
public class PieChart
{
public PieChart()
{
}
/// <summary>
/// 画饼图
/// </summary>
/// <param name="title">饼图要是显示的大标题</param>
/// <param name="subTitle"></param>
/// <param name="width"></param>
/// <param name="height"></param>
/// <param name="chartData"></param>
/// <param name="target"></param>
public void Render(string title, string subTitle, int width, int height, DataSet chartData, Stream target)
{
const int SIDE_LENGTH = 400;
const int PIE_DIAMETER = 200;
DataTable dt = chartData.Tables[0];
//通过输入参数,取得饼图中的总基数
float sumData = 0;
foreach (DataRow dr in dt.Rows)
{
sumData += Convert.ToSingle(dr[1]);
}
//产生一个image对象,并由此产生一个Graphics对象
Bitmap bm = new Bitmap(width, height);
Graphics g = Graphics.FromImage(bm);
//设置对象g的属性
g.ScaleTransform((Convert.ToSingle(width)) / SIDE_LENGTH, (Convert.ToSingle(height)) / SIDE_LENGTH);
g.SmoothingMode = SmoothingMode.Default;
g.TextRenderingHint = TextRenderingHint.AntiAlias;
//画布和边的设定
g.Clear(Color.White);
g.DrawRectangle(Pens.Black, 0, 0, SIDE_LENGTH - 1, SIDE_LENGTH - 1);
//画饼图标题
g.DrawString(title, new Font("Tahoma", 24), Brushes.Black, new PointF(5, 5));
//画饼图的图例
g.DrawString(subTitle, new Font("Tahoma", 14), Brushes.Black, new PointF(7, 35));
//画饼图
float curAngle = 0;
float totalAngle = 0;
for (int i = 0; i < dt.Rows.Count; i++)
{
curAngle = Convert.ToSingle(dt.Rows[i][1]) / sumData * 360;
g.FillPie(new SolidBrush(ChartUtil.GetChartItemColor(i)), 100, 65, PIE_DIAMETER, PIE_DIAMETER, totalAngle, curAngle);
g.DrawPie(Pens.Black, 100, 65, PIE_DIAMETER, PIE_DIAMETER, totalAngle, curAngle);
totalAngle += curAngle;
}
//画图例框及其文字
g.DrawRectangle(Pens.Black, 200, 300, 199, 99);
g.DrawString("Legend", new Font("Tahoma", 12, FontStyle.Bold), Brushes.Black, new PointF(200, 300));
//画图例各项
PointF boxOrigin = new PointF(210, 330);
PointF textOrigin = new PointF(235, 326);
float percent = 0;
for (int i = 0; i < dt.Rows.Count; i++)
{
g.FillRectangle(new SolidBrush(ChartUtil.GetChartItemColor(i)), boxOrigin.X, boxOrigin.Y, 20, 10);
g.DrawRectangle(Pens.Black, boxOrigin.X, boxOrigin.Y, 20, 10);
percent = Convert.ToSingle(dt.Rows[i][1]) / sumData * 100;
g.DrawString(dt.Rows[i][0].ToString() + " - " + dt.Rows[i][1].ToString() + " (" + percent.ToString("0") + "%)", new Font("Tahoma", 10), Brushes.Black, textOrigin);
boxOrigin.Y += 15;
textOrigin.Y += 15;
}
//通过Response.OutputStream,将图形的内容发送到浏览器
bm.Save(target, ImageFormat.Gif);
//回收资源
bm.Dispose();
g.Dispose();
}
}
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.IO;//用于文件存取
using System.Data;//用于数据访问
using System.Drawing;//提供画GDI+图形的基本功能
using System.Drawing.Text;//提供画GDI+图形的高级功能
using System.Drawing.Drawing2D;//提供画高级二维,矢量图形功能
using System.Drawing.Imaging;//提供画GDI+图形的高级功能
namespace Insight_cs.WebCharts
{
public class ChartUtil
{
public ChartUtil()
{
}
public static Color GetChartItemColor(int itemIndex)
{
Color selectedColor;
switch (itemIndex)
{
case 0:
selectedColor = Color.Blue;
break;
case 1:
selectedColor = Color.Red;
break;
case 2:
selectedColor = Color.Yellow;
break;
case 3:
selectedColor = Color.Purple;
break;
default:
selectedColor = Color.Green;
break;
}
return selectedColor;
}
}
}
using System.Text;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web.SessionState;
using System.Web.UI.HtmlControls;
using System.Drawing.Imaging;
using System.Drawing.Drawing2D;
namespace Insight_cs.WebCharts
{
public class zexian
{
public zexian();
public void rend()
{
/**/
/*自写编码*/
int ImgWidth = 600; //1.[总宽度] ***图宽度
int ImgHeight = 300; //2.[总高度] ***图高度
int ItemNum = 1; //3.[项目数量] ***图表划分的块
int ChildNum = 6; //4.[块数] ***大块中划分的子项的数量
float ChildRate = 0.6f; //5.[各块总占空间比率]
//int ChildSpace=15; //6.[各块间的间距]
int ChartLeft = 80; //7.[图表左边距] ***图表距图的左边距离
int ChartRight = 50; //8.[图表右边距] ***图表距图的右边距离
int ChartTop = 50; //9.[图表顶边距] ***图表距图顶边距离
int ChartBottom = 50; //10.[图表底边距] ***图表距图底边距离
int YMaxValue = 5000; //11.[纵坐标标尺最大值] ***纵坐标标尺的最大值
int YItemNum = 10; //12.[纵坐标标尺段数] ***纵坐标标尺的段数
int YTop = 15; //13.[距纵轴顶端间隔]
int YStrStart = 35; //14.[纵坐标标尺文字起始X坐标]
int XRight = 15; //15.[距横轴右端间隔]
int XStrStart = 20; //16.[横坐标标尺文字起始Y坐标]
//[图表总宽度]=[总宽度]-[图表左边距]-[图表右边距]-[距横轴右端间隔]
int chartwidth = ImgWidth - ChartLeft - ChartRight - XRight;
//[项目宽度]=[图表总宽度]/[项目数量]
int itemwidth = chartwidth / ItemNum;
//[各块总占空间比率的实际宽度]=[项目宽度]*[各块总占空间比率]
int factwidth = Convert.ToInt32(Math.Floor(itemwidth * ChildRate));
//[各块矩形宽度]=[各块总占空间比率的实际宽度]/[块数]
int rectanglewidth = factwidth / ChildNum;
//[各块间的间距]=([项目宽度]-[各块总占空间比率的实际宽度])/([块数]+1)
int childspace = Convert.ToInt32(Math.Floor(double.Parse(((itemwidth - factwidth) / (ChildNum + 1)).ToString())));
Graphics objGps;//建立画板对象
Bitmap objBitMap = new Bitmap(ImgWidth, ImgHeight);//建立位图对象
objGps = Graphics.FromImage(objBitMap);//根据位图对象建立画板对象
objGps.Clear(Color.White);//设置画板对象的背景色
//数组存放所有数据的集合 用于计算x/y轴的值
int[] arrValues = { 0, 0, 0, 0, 0, 0 };//数据数组
//arrValues[0]=500;
arrValues[0] = Convert.ToInt32(Math.Floor(double.Parse(((ImgHeight - ChartBottom - ChartTop - YTop) * 300 / YMaxValue).ToString()))); //处理显示数据,进行图表数值对应
arrValues[1] = Convert.ToInt32(Math.Floor(double.Parse(((ImgHeight - ChartBottom - ChartTop - YTop) * 700 / YMaxValue).ToString())));
arrValues[2] = Convert.ToInt32(Math.Floor(double.Parse(((ImgHeight - ChartBottom - ChartTop - YTop) * 900 / YMaxValue).ToString())));
arrValues[3] = Convert.ToInt32(Math.Floor(double.Parse(((ImgHeight - ChartBottom - ChartTop - YTop) * 1000 / YMaxValue).ToString())));
arrValues[4] = Convert.ToInt32(Math.Floor(double.Parse(((ImgHeight - ChartBottom - ChartTop - YTop) * 1400 / YMaxValue).ToString())));
arrValues[5] = Convert.ToInt32(Math.Floor(double.Parse(((ImgHeight - ChartBottom - ChartTop - YTop) * 2200 / YMaxValue).ToString())));
//显示于y轴上的标点
string[] arrValueNames = { "0", "0", "0", "0", "0", "0", "0", "0", "0", "0" };//月份
arrValueNames[0] = "一月";
arrValueNames[1] = "二月";
arrValueNames[2] = "三月";
arrValueNames[3] = "四月";
arrValueNames[4] = "五月";
arrValueNames[5] = "六月";
arrValueNames[6] = "七月";
arrValueNames[7] = "八月";
arrValueNames[8] = "九月";
arrValueNames[9] = "十月";
string[] xvaluename = new string[6] {
"1","2","3","4","5","7"
};
//得出矩形宽度,和画图X轴位置
//[项目宽度]=[总宽度]/[项目数量]
//======[各块总占空间比率]=([各块矩形宽度]+[各块间的间距])/[项目宽度]
//[各块总占空间比率的实际宽度]=[项目宽度]*[各块总占空间比率]
//[各块矩形宽度]=([各块总占空间比率的实际宽度]-[各块间的间距]*([块数]))/[块数]
//[一边空余空间宽度]=([项目宽度]-[各块所占空间比率的总宽度])/2
System.Drawing.Point[] pi = new Point[arrValues.Length]; //定义折线点的对象数组
System.Drawing.Point[] pit = new Point[3]; //定义坐标三角点的对象数组
System.Drawing.Pen pe = new Pen(new SolidBrush(GetColor(7)), 1f); //定义画直线的对象
//画纵轴
objGps.DrawLine(pe, new Point(ChartLeft, ImgHeight - ChartBottom), new Point(ChartLeft, ChartTop));
//画纵轴终点箭头
pit[0].X = ImgWidth - ChartRight; //确定三角形三点的位置
pit[0].Y = ImgHeight - ChartBottom - 4;
pit[1].X = ImgWidth - ChartRight;
pit[1].Y = ImgHeight - ChartBottom + 4;
pit[2].X = ImgWidth - ChartRight + 10;
pit[2].Y = ImgHeight - ChartBottom;
objGps.FillPolygon(new SolidBrush(GetColor(7)), pit);
//画纵轴标尺和标尺描述
for (int i = 1; i <= YItemNum; i++)
{
//画标尺
objGps.DrawLine(pe, new PointF(ChartLeft, ImgHeight - ChartBottom - (ImgHeight - ChartBottom - ChartTop - YTop) / YItemNum * i), new PointF(ChartLeft - 5, ImgHeight - ChartBottom - (ImgHeight - ChartBottom - ChartTop - YTop) / YItemNum * i));
//画描述
objGps.DrawString(arrValueNames[i - 1].ToString(), new Font("宋体", 10), Brushes.Black, new Point(YStrStart, ImgHeight - ChartBottom - (ImgHeight - ChartBottom - ChartTop - YTop) / YItemNum * i - 5));
}
//画横轴
objGps.DrawLine(pe, new Point(ChartLeft, ImgHeight - ChartBottom), new Point(ImgWidth - ChartRight, ImgHeight - ChartBottom));
//画横轴终点箭头
pit[0].X = ChartLeft - 4; //确定三角形三点的位置
pit[0].Y = ChartTop;
pit[1].X = ChartLeft + 4;
pit[1].Y = ChartTop;
pit[2].X = ChartLeft;
pit[2].Y = ChartTop - 10;
objGps.FillPolygon(new SolidBrush(GetColor(7)), pit);
//画横轴标尺和标尺描述
for (int i = 1; i <= ItemNum; i++)
{
//横轴标尺
objGps.DrawLine(pe, new PointF(ChartLeft + itemwidth * i, ImgHeight - ChartBottom), new PointF(ChartLeft + itemwidth * i, ImgHeight - ChartBottom + 5));
//横轴描叙
objGps.DrawString(arrValueNames[i - 1].ToString(), new Font("宋体", 10), Brushes.Black, new Point(ChartLeft + childspace + itemwidth * (i - 1), ImgHeight - ChartBottom + XStrStart));
}
for (int j = 0; j < arrValues.Length; j++)//画矩形图和折线图
{
//画条形图
objGps.FillRectangle(new SolidBrush(GetColor(j)), (j * (childspace + rectanglewidth)) + childspace + ChartLeft, ImgHeight - ChartBottom - arrValues[j], rectanglewidth, arrValues[j]);
objGps.DrawRectangle(Pens.Black, (j * (childspace + rectanglewidth)) + childspace + ChartLeft, ImgHeight - ChartBottom - arrValues[j], rectanglewidth, arrValues[j]);
//画折线图
pi[j].X = (j * (childspace + rectanglewidth)) + childspace + ChartLeft;
pi[j].Y = ImgHeight - ChartBottom - arrValues[j];
pe.SetLineCap(System.Drawing.Drawing2D.LineCap.RoundAnchor, System.Drawing.Drawing2D.LineCap.RoundAnchor, System.Drawing.Drawing2D.DashCap.Round);
if (j > 0)
{
objGps.DrawLine(pe, pi[j - 1], pi[j]);
}
}
objBitMap.Save(Response.OutputStream, ImageFormat.Gif);//该位图对象以"GIF"格式输出
}
/**/
/// <param name="itemIndex">系统定义的颜色,有效值0到7,分别为(Blue,Yellow,Red,Orange,Purple,Brown,Pink,Black)</param>
/// <returns></returns>
public static Color GetColor(int itemIndex)
{
Color objColor = new Color();
switch (itemIndex)
{
case 0:
objColor = Color.Blue;
break;
case 1:
objColor = Color.Yellow;
break;
case 2:
objColor = Color.Red;
break;
case 3:
objColor = Color.Orange;
break;
case 4:
objColor = Color.Purple;
break;
case 5:
objColor = Color.Brown;
break;
case 6:
objColor = Color.Pink;
break;
default:
objColor = Color.Black;
break;
}
return objColor;
}
/**/
/// <param name="red">自定义颜色红色分量值,有效值0到255</param>
/// <param name="green">自定义颜色绿色分量值,有效值0到255</param>
/// <param name="blue">自定义颜色蓝色分量值,有效值0到255</param>
/// <returns></returns>
public static Color GetColor(int red, int green, int blue)
{
Color objColor = new Color();
objColor = Color.FromArgb(red, green, blue);
return objColor;
}
}
}
条形图和饼图的调用
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 klzx.NoteFlatrootSys.DAL;
using System.Text;
using System.Data.SqlClient;
using Insight_cs.WebCharts;
public partial class drawpicture : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Page.Init += new System.EventHandler(Page_Init);
}
private void Page_Init(object sender, EventArgs e)
{
//
// CODEGEN: This call is required by the ASP.NET Web Form Designer.
//
InitializeComponent();
}
#region Web Form Designer generated code
/// <summary>
/// Required method for Designer support - do not modify
/// the contents of this method with the code editor.
/// </summary>
private void InitializeComponent()
{
this.Load += new System.EventHandler(this.Page_Load);
}
#endregion
/// <summary>
/// 调用饼图
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void btn_Click(object sender, EventArgs e)
{
DataSet ds = getds();
PieChart pc = new PieChart();
pc.Render("aa", "bb", 400, 500, ds, Response.OutputStream);
}
private static DataSet getds()
{
string sql = "select Year(s.statDate) As [Year],sum(s.total) as 总发送 from smsstat s inner join smsjob j on (s.jobid=j.jobid)group by Year(s.statDate) ";
DataSet ds = new DataSet();
ds = DBHelper.GetDataSet1(sql);
return ds;
}
/// <summary>
/// 条形图
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void Button1_Click(object sender, EventArgs e)
{
DataSet ds = getds();
BarChart bc = new BarChart();
bc.Render("b", "", 400, 500, ds, Response.OutputStream);
}
}