动态绘制3D柱状图饼状图

来源：互联网发布：时间轴数据库设计编辑：程序博客网时间：2024/05/02 15:47

ASP.NET利用VML绘制统计图

命名空间：System.Drawing.VmlChart

PillarChart类：设置及生成柱状图的VML字符串

方法：GetPillarStr(Datatable)，用于获取柱状图VML字符串。

属性：

背景图宽度(默认:500px):Width

背景图高度(默认:200px):Height

距顶端的垂直距离(默认:0px)：Top

距左边的垂直距离(默认:0px)：Left

Y轴分为几段(默认:10)：Section

柱状图最大值(默认为数据最大值的130%)：MaxNum

颜色列表(默认已有:12种颜色)：PillarColor

背景颜色(默认:#9cf)：BgColor

刻度线颜色(默认:#69f)：SecColor

柱子宽度(默认:30)：PilWidth

PieChart类：设置及生成饼状图的VML字符串

方法：GetPieStr(Datatable)，用于获取饼状图VML字符串。

属性：

饼状图标题(默认:PieChart 动态绘制饼状图)：Caption

饼状图标题字体颜色(默认:black)：CapColor

饼状图宽度(默认:500px)：Width

饼状图高度(默认:300px)：Height

距顶端的垂直距离(默认:0px)：Top

距左边的垂直距离(默认:0px)：Left

颜色列表(默认已有:12种颜色)：PieColor

饼状图阴影(默认:true)：Shadow

饼状图背景颜色(默认:gray)：PieBgColor

图例背景颜色(默认:gray)：LegBgColor

图例标题(默认:总数:)：LegCaption

图例标题字体颜色(默认:white)：LegCapColor

图例标题背景颜色(默认:#777777)：LegCapBgColor

图例字体颜色(默认:black)：LegContentColor

百分比字体颜色(默认:white)：PerColor

百分比字体厚度(默认:5)：PerIMT

使用方法：

前期工作：

在调用该类的aspx页面的<html>中添加下面内容：

<head>中添加如下内容：

</head>

在调用该类的aspx页面中加入一个<%=pillvm%>用于显示柱状图

在调用该类的aspx页面中加入一个<%=pievm%>用于显示饼状图

开始生成统计图：

using System.Drawing.VmlChart; //引用命名空间

在调用该类的cs文件中声明两个变量

public pillvm;

public pievm;

DataTable dt = new DataTable(); //被统计的数据，

//表字段结构：Columns[0] 项目Name;Columns[1] 项目Count

PillarChart pill = new PillarChart(); //实例化一个柱状图

pillvm = pill.GetPillarStr(dt); //生成柱状图的VML字符串

PieChart pie = new PieChart(); //实例化一个饼状图

pievm = pie.GetPieChart(dt); //生成饼状图的VML字符串

示例代码：

Default.aspx

Default.aspx.cs

下载该类：http://www.cnblogs.com/haian/archive/2009/12/08/1619751.html

===============华丽分割线===========================

给初学编程者方便修改及使用该类，特附该类源码。

/**********************************************************
* 说明：VML动态绘制统计图
* 部门：海象工作组
* 作者：【彼岸】
* 创建日期：2009-12-01
*********************************************************/

using System;
using System.Collections;
using System.Data;
using System.Text;

namespace System.Drawing.VmlChart
{
/// <summary>
/// PieChart 动态绘制柱形图
/// </summary>
public class PillarChart
{
#region 构造函数

public PillarChart()
{
this._width = 500;
this._height = 200;
this._top = 0;
this._left = 0;
this._section = 10;
this._maxnum = 0;

this._seccolor = "#9cf";
this._bgcolor = "gray";
this._pillarcolor.Add("#FFFF19");
this._pillarcolor.Add("#1919FF");
this._pillarcolor.Add("#19FF19");
this._pillarcolor.Add("#FC0");
this._pillarcolor.Add("#3CC");
this._pillarcolor.Add("#FF19FF");
this._pillarcolor.Add("#993300");
this._pillarcolor.Add("#F60");
this._pillarcolor.Add("#FF8C19");
this._pillarcolor.Add("#AAAAAA");
this._pillarcolor.Add("#333333");
this._pillarcolor.Add("#FF1919");
this._pilwidth = 30;
}

#endregion

#region 私有成员

private int _width; //背景矩形的实际宽
private int _height; //背景矩形的实际高

private int _top; //距离上边距的距离
private int _left; //距离左边距的距离
private int _section; //刻度(Y坐标分成几份)
private int _maxnum; //最大值
private string _seccolor; //刻度线颜色
private string _bgcolor; //背景颜色
private ArrayList _pillarcolor = new ArrayList();
private int _pilwidth; //柱子宽度

#endregion

#region 公有属性

/// <summary>
/// 背景图宽度(默认:500px)
/// </summary>
public int Width
{
set { this._width = value; }
get { return this._width; }
}
/// <summary>
/// 背景图高度(默认:200px)
/// </summary>
public int Height
{
set { this._height = value; }
get { return this._height; }
}
/// <summary>
/// 背景图距顶端的垂直距离(默认:0px)
/// </summary>
public int Top
{
set { this._top = value; }
get { return this._top; }
}
/// <summary>
/// 背景图距左边的垂直距离(默认:0px)
/// </summary>
public int Left
{
set { this._left = value; }
get { return this._left; }
}
/// <summary>
/// Y轴分为几段(默认:10px)
/// </summary>
public int Section
{
set { this._section = value; }
get { return this._section; }
}
/// <summary>
/// 柱状图最大值(默认为数据最大值的130%)
/// </summary>
public int MaxNum
{
set { this._maxnum = value; }
get { return this._maxnum; }
}
/// <summary>
/// 颜色列表(默认已有:12种颜色)
/// </summary>
public ArrayList PillarColor
{
set { this._pillarcolor = value; }
get { return this._pillarcolor; }
}
/// <summary>
/// 背景颜色(默认:#9cf)
/// </summary>
public string BgColor
{
set { this._bgcolor = value; }
get { return this._bgcolor; }
}
/// <summary>
/// 刻度线颜色(默认:#69f)
/// </summary>
public string SecColor
{
set { this._seccolor = value; }
get { return this._seccolor; }
}
/// <summary>
/// 柱子宽度(默认:30)
/// </summary>
public int PilWidth
{
set { this._pilwidth = value; }
get { return this._pilwidth; }
}

#endregion

#region 公有方法

/// <summary>
/// 绘制柱形图
/// </summary>
/// <param name="dt">Columns[0] Name;Columns[1] Count</param>
/// <returns>饼状图VML字符串</returns>
public string GetPillarStr(DataTable dt)
{
//取出最大值
if (_maxnum == 0)
{
int rowi = 0;
foreach (DataRow row in dt.Rows)
{
if (this._maxnum < Convert.ToInt32(dt.Rows[rowi].ItemArray[1].ToString()))
{
this._maxnum = Convert.ToInt32(dt.Rows[rowi].ItemArray[1].ToString());
}
rowi++;
}
this._maxnum = this._maxnum + _maxnum / 2;
}
int i = 0; //主要是为了生成id
int j = 0; //控件循环
StringBuilder strPillar = new StringBuilder();
int h = (int)this._height / this._section;//刻度
//生成背景图(高度和宽度，以及左边距，上边距,背景色，渐变)
strPillar.Append(@"");
//第一条竖线
strPillar.Append(@"");
//第二条竖线
strPillar.Append(@"");
//两条竖线之间的交接线
j = 0;
while (j < this._section)
{
strPillar.Append(@"");
j++;
}
//最下面的横线
strPillar.Append(@"");
//其余横线(上面的)
j = 0;
while (j < this._section)
{
strPillar.Append(@"");
j++;
}
//显示坐标及坐标上的边线
j = 0;
while (j < this._section)
{
strPillar.Append(@"");
j++;
}

int l;//左边距
int t;//上边距
int pillheight;//柱子高
int f = (int)(this._width - this._pilwidth * dt.Rows.Count) / (dt.Rows.Count + 1);//每块之间的间隔
int rwi = 0;
l = this._left + this._pilwidth;
i = 0;
//把所有项读取出来，并在屏幕上显示
foreach (DataRow row in dt.Rows)
{
pillheight = Convert.ToInt32(this._height * Convert.ToDouble(dt.Rows[rwi].ItemArray[1].ToString()) / _maxnum);
t = this._top + this._height - pillheight;
strPillar.Append(@"<v:Rect id='_xpillar_" + Convert.ToString(i++) + "' alt='' title='项目：" + dt.Rows[rwi].ItemArray[0].ToString() + "' style='position:absolute;left:" + Convert.ToString(l) + ";top:" + Convert.ToString(t) + ";width:30px;height:" + Convert.ToString(pillheight) + ";z-index:1' FillColor='" + this._pillarcolor[rwi % this._pillarcolor.Count] + "' onmouseover='this.FillColor=\"#ffffff\"' onmouseout='this.FillColor=\"" + this._pillarcolor[rwi % this._pillarcolor.Count] + "\"' ><v:Fill color2='" + this._pillarcolor[rwi % this._pillarcolor.Count] + "' rotate='t' type='gradient'/><o:Extrusion v:ext='view' backdepth='20pt' color='" + this._pillarcolor[rwi % this._pillarcolor.Count] + "' on='t'/></v:Rect>");
strPillar.Append(@"<v:Shape id='_xpillar_" + Convert.ToString(i++) + "' type='#_x0000_t202' alt='' style='position:absolute;left:" + Convert.ToString(l - 10) + ";top:" + Convert.ToString(this._top + this._height + 1) + ";width:57.1px;height:18px;z-index:1'><v:TextBox inset='0px,0px,0px,0px'><table cellspacing='3' cellpadding='0' width='100%' height='100%'><tr><td align='center'>" + dt.Rows[rwi].ItemArray[0].ToString() + "</td></tr></table></v:TextBox></v:Shape>");
strPillar.Append(@"<v:Shape id='_xpillar_" + Convert.ToString(i++) + "' type='#_x0000_t202' alt='' style='position:absolute;left:" + Convert.ToString(l) + ";top:" + Convert.ToString(t - 30) + ";width:42.1px;height:18px;z-index:1'><v:TextBox inset='0px,0px,0px,0px'><table cellspacing='3' cellpadding='0' width='100%' height='100%'><tr><td align='center'>" + dt.Rows[rwi].ItemArray[1].ToString() + "</td></tr></table></v:TextBox></v:Shape>");
strPillar.Append(" ");
l = l + f + this._pilwidth; //计算下一个柱子距离左边的大小 ;
rwi++;
}
return strPillar.ToString();
}

#endregion
}

/// <summary>
/// PieChart 动态绘制饼状图
/// </summary>
public class PieChart
{
#region 构造函数

public PieChart()
{
this._caption = "PieChart 动态绘制饼状图";
this._capcolor = "black";
this._width = 500;
this._height = 300;
this._top = 0;
this._left = 0;

this._piecolor.Add("#FFFF19");
this._piecolor.Add("#1919FF");
this._piecolor.Add("#19FF19");
this._piecolor.Add("#FC0");
this._piecolor.Add("#3CC");
this._piecolor.Add("#FF19FF");
this._piecolor.Add("#993300");
this._piecolor.Add("#F60");
this._piecolor.Add("#FF8C19");
this._piecolor.Add("#AAAAAA");
this._piecolor.Add("#333333");
this._piecolor.Add("#FF1919");
this._shadow = true;
this._piebgcolor = "gray";
this._legbgcolor = "gray";
this._legcaption = "总数:";
this._legcapcolor = "white";
this._legcapbgcolor = "#777777";
this._legcontentcolor = "black";
this._percolor = "white";
this._perimt = "6";
}

#endregion

#region 私有成员

private string _caption;
private string _capcolor;
private int _width;
private int _height;
private int _top;
private int _left;

private ArrayList _piecolor = new ArrayList();//饼状图颜色
private bool _shadow;//阴影
private string _piebgcolor;//饼状图背景颜色
private string _legbgcolor;//图例背景颜色
private string _legcapbgcolor;//图例背景颜色
private string _legcaption;//图例标题
private string _legcapcolor;//图例标题字体颜色
private string _legcontentcolor;//图例字体颜色
private string _percolor;//百分比字体颜色
private string _perimt;//百分比字体厚度

#endregion

#region 公有属性

/// <summary>
/// 饼状图标题(默认:PieChart 动态绘制饼状图)
/// </summary>
public string Caption
{
set { this._caption = value; }
get { return this._caption; }
}
/// <summary>
/// 饼状图标题字体颜色(默认:black)
/// </summary>
public string CapColor
{
set { this._capcolor = value; }
get { return this._capcolor; }
}
/// <summary>
/// 饼状图宽度(默认:500px)
/// </summary>
public int Width
{
set { this._width = value; }
get { return this._width; }
}
/// <summary>
/// 饼状图高度(默认:300px)
/// </summary>
public int Height
{
set { this._height = value; }
get { return this._height; }
}
/// <summary>
/// 饼状图距顶端的垂直距离(默认:0px)
/// </summary>
public int Top
{
set { this._top = value; }
get { return this._top; }
}
/// <summary>
/// 饼状图距左边的垂直距离(默认:0px)
/// </summary>
public int Left
{
set { this._left = value; }
get { return this._left; }
}
/// <summary>
/// 颜色列表(默认已有:12种颜色)
/// </summary>
public ArrayList PieColor
{
set { this._piecolor = value; }
get { return this._piecolor; }
}
/// <summary>
/// 饼状图阴影(默认:true)
/// </summary>
public bool Shadow
{
set { this._shadow = value; }
get { return this._shadow; }
}
/// <summary>
/// 饼状图背景颜色(默认:gray)
/// </summary>
public string PieBgColor
{
set { this._piebgcolor = value; }
get { return this._piebgcolor; }
}
/// <summary>
/// 图例背景颜色(默认:gray)
/// </summary>
public string LegBgColor
{
set { this._legbgcolor = value; }
get { return this._legbgcolor; }
}
/// <summary>
/// 图例标题(默认:总数:)
/// </summary>
public string LegCaption
{
set { this._legcaption = value; }
get { return this._legcaption; }
}
/// <summary>
/// 图例标题字体颜色(默认:white)
/// </summary>
public string LegCapColor
{
set { this._legcapcolor = value; }
get { return this._legcapcolor; }
}
/// <summary>
/// 图例标题背景颜色(默认:#777777)
/// </summary>
public string LegCapBgColor
{
set { this._legcapbgcolor = value; }
get { return this._legcapbgcolor; }
}
/// <summary>
/// 图例字体颜色(默认:black)
/// </summary>
public string LegContentColor
{
set { this._legcontentcolor = value; }
get { return this._legcontentcolor; }
}
/// <summary>
/// 百分比字体颜色(默认:white)
/// </summary>
public string PerColor
{
set { this._percolor = value; }
get { return this._percolor; }
}
/// <summary>
/// 百分比字体厚度(默认:5)
/// </summary>
public string PerIMT
{
set { this._perimt = value; }
get { return this._perimt; }
}

#endregion

#region 公有方法

/// <summary>
/// 绘制饼状图
/// </summary>
/// <param name="dt">Columns[0] Name;Columns[1] Count</param>
/// <returns>饼状图VML字符串</returns>
public string GetPieStr(DataTable dt)
{
int total = 0;

//获得总数
for (int i = 0; i < dt.Rows.Count; i++)
{
total += Convert.ToInt32(dt.Rows[i].ItemArray[1].ToString());
}

StringBuilder PieStr = new StringBuilder();
//绘制标题、背景及图例
PieStr.AppendLine(@"<v:Shapetype id='Cake_3D' coordsize='21600,21600' o:spt='95' adj='11796480,5400' path='al10800,10800@0@0@2@14,10800,10800,10800,10800@3@15xe'></v:Shapetype>");
//立体百分比字
PieStr.AppendLine(@"<v:Shapetype id='3dtxt' coordsize='21600,21600' o:spt='136' adj='10800' path='m@7,l@8,m@5,21600l@6,21600e'><v:Path textpathok='t' o:connecttype='custom' o:connectlocs='@9,0;@10,10800;@11,21600;@12,10800' o:connectangles='270,180,90,0'/><v:TextPath on='t' fitshape='t'/><o:lock v:ext='edit' text='t' shapetype='t'/></v:Shapetype>");
//阴影
if (this._shadow == true)
{
PieStr.AppendLine(@"<v:Rect id='background' style='position:absolute;left:" + this._left + "px;top:" + this._top + "px;WIDTH:" + this._width + "px;HEIGHT:" + this._height + "px;' FillColor='#EFEFEF' strokecolor='#CCCCCC'><v:Shadow on='t' type='single' color='silver' offset='4pt,4pt'/></v:Rect>");
}
//标题、背景及图例容器
PieStr.AppendLine(@"<v:Group ID='table' style='position:absolute;left:" + this._left + "px;top:" + this._top + "px;WIDTH:" + this._width + "px;HEIGHT:" + this._height + "px;' coordsize = '21000,11500'>");
//绘制图标题
PieStr.AppendLine(@"<v:Rect style='position:relative;left:500;top:200;width:20000;height:800'filled='false' stroked='false'><v:TextBox inset='0pt,0pt,0pt,0pt'><table width='100%' border='0' align='center' cellspacing='0'><tr><td align='center' valign='middle'><b>" + this._caption + "</b></td></tr></table></v:TextBox></v:Rect>");
//饼状图背景
PieStr.AppendLine(@"<v:Rect id='back' style='position:relative;left:500;top:1000;width:20000; height:10000;' onmouseover='movereset(1)' onmouseout='movereset(0)' FillColor='" + this._piebgcolor + "' strokecolor='#CCCCCC'><v:Fill rotate='t' angle='-45' focus='100%' type='gradient'/></v:Rect>");
//图例背景
PieStr.AppendLine(@"<v:Rect id='back' style='position:relative;left:15000;top:1400;width:5000; height:8800;' FillColor='" + this._legbgcolor + "' stroked='t' strokecolor='#CCCCCC'><v:Fill rotate='t' angle='-175' focus='100%' type='gradient'/><v:Shadow on='t' type='single' color='silver' offset='3pt,3pt'/></v:Rect>");
//图例标题
PieStr.AppendLine(@"<v:Rect style='position:relative;left:15500;top:1500;width:4000;height:700' FillColor='" + this._legcapbgcolor + "' stroked='f' strokecolor='#000000'><v:TextBox inset='5px,4pt,3pt,0pt' style='font-size:9pt;color:" + this._legcapcolor + ";font-weight:bold;text-align:center;'>" + this._legcaption + total + "</v:TextBox></v:Rect>");

//绘制图例
for (int i = 0; i < dt.Rows.Count; i++)
{
//图例事件
PieStr.AppendLine(@"<v:Rect id='rec" + (i + 1) + "' style='position:relative;left:15400;top:" + (2600 + i * 600) + ";width:4300;height:450;display:none' FillColor='#efefef' strokecolor='" + this._piecolor[i % this._piecolor.Count] + "'><v:Fill opacity='.6' color2='fill darken(118)' o:opacity2='.6' rotate='t' method='linear sigma' focus='100%' type='gradient'/></v:Rect>");
//图例色块
PieStr.AppendLine(@"<v:Rect style='position:relative;left:15500;top:" + (2630 + i * 600) + ";width:600;height:400' FillColor='" + this._piecolor[i % this._piecolor.Count] + "' stroked='f'/>");
//图例内容
PieStr.AppendLine(@"<v:Rect style='position:relative;left:16300;top:" + (2630 + i * 600) + ";width:3400;height:450' filled='f' stroked='f' onmouseover='moveup(cake" + (i + 1) + "," + (this._top + this._height / 14) + ",txt" + (i + 1) + ",rec" + (i + 1) + ")'; onmouseout='movedown(cake" + (i + 1) + "," + (this._top + this._height / 14) + ",txt" + (i + 1) + ",rec" + (i + 1) + ");'><v:TextBox inset='0pt,1px,0pt,0pt' style='font-size:9pt;color:" + this._legcontentcolor + ";text-align=left; '>" + dt.Rows[i].ItemArray[0].ToString() + "：" + dt.Rows[i].ItemArray[1].ToString() + "</v:TextBox></v:Rect>");
}
PieStr.AppendLine(@"</v:Group>");

//绘制饼图
int zIndex = 10;
string adjs;
Double rotates;
Double k1 = 180;

for (int i = 0; i < dt.Rows.Count; i++)
{
Double k2 = 360 * Convert.ToDouble(Convert.ToDouble(dt.Rows[i].ItemArray[1].ToString()) / total) / 2;
rotates = k1 + k2;
if (rotates >= 360)
{
rotates = rotates - 360;
}
adjs = Convert.ToString(-11796480 * Convert.ToDouble(Convert.ToDouble(dt.Rows[i].ItemArray[1].ToString()) / total) + 5898240);
Double k5 = Math.PI * 2 * (180 - (rotates - 180)) / 360;
int R = this._height / 2;
Double txt_x = this._left + this._height / 8 - 30 + R + R * Math.Sin(k5) * 0.7;
Double txt_y = this._top + this._height / 14 - 39 + R + R * Math.Cos(k5) * 0.7 * 0.5;

PieStr.AppendLine(@"<v:Shape id='cake" + (i + 1) + "' type='#Cake_3D' title='项目：" + dt.Rows[i].ItemArray[0].ToString() + "\n数据：" + dt.Rows[i].ItemArray[1].ToString() + "\n百分比：" + (Math.Round(Convert.ToDouble(dt.Rows[i].ItemArray[1].ToString()) / total, 2) * 100) + "%' style='position:absolute;left:" + (this._left + this._height / 8) + "px;top:" + (this._top + this._height / 14) + "px;WIDTH:" + this._height + "px;HEIGHT:" + this._height + "px;rotation:" + rotates + ";z-index:" + zIndex + "' adj='" + adjs + ",0' FillColor='" + this._piecolor[i % this._piecolor.Count] + "' onmouseover='moveup(cake" + (i + 1) + "," + (this._top + this._height / 14) + ",txt" + (i + 1) + ",rec" + (i + 1) + ")'; onmouseout='movedown(cake" + (i + 1) + "," + (this._top + this._height / 14) + ",txt" + (i + 1) + ",rec" + (i + 1) + ");'><v:Fill opacity='60293f' color2='fill lighten(120)' o:opacity2='60293f' rotate='t' angle='-135' method='linear sigma' focus='100%' type='gradient'/><o:Extrusion v:ext='view' on='t'backdepth='15' rotationangle='60' viewpoint='0,0'viewpointorigin='0,0' skewamt='0' lightposition='-50000,-50000' lightposition2='50000'/></v:Shape>");
PieStr.AppendLine(@"<v:Shape id='txt" + (i + 1) + "' type='#3dtxt' style='position:absolute;left:" + txt_x + "px;top:" + txt_y + "px;z-index:20;display:none;width:50; height:20;' FillColor='" + this._percolor + "' onmouseover='ontxt(cake" + (i + 1) + "," + (this._top + this._height / 14) + ",txt" + (i + 1) + ",rec" + (i + 1) + ")'><v:Fill opacity='60293f' color2='fill lighten(120)' o:opacity2='60293f' rotate='t' angle='-135' method='linear sigma' focus='100%' type='gradient'/><v:TextPath style='font-family:'宋体';v-text-kern:t' trim='t' fitpath='t' string='" + (Math.Round(Convert.ToDouble(dt.Rows[i].ItemArray[1].ToString()) / total, 2) * 100) + "%'/><o:Extrusion v:ext='view' backdepth='" + this._perimt + "pt' on='t' lightposition='0,0' lightposition2='0,0'/></v:Shape>");

k1 = k1 + k2 * 2;
if (k1 >= 360)
{
k1 = k1 - 360;
}
if (k1 > 180)
{
zIndex = zIndex + 1;
}
else
{
zIndex = zIndex - 1;
}
}

PieStr.AppendLine("");
PieStr.AppendLine("<SCRIPT LANGUAGE=\"JavaScript\">");
PieStr.AppendLine("");
PieStr.AppendLine("</script>");

return PieStr.ToString();
}

#endregion
}
}