Chart控件的多种用法
2009-08-12 10:23 5315人阅读 评论(2) 收藏 举报
花了近一周时间专门研究.net 3.5平台提供的Chart控件的用法，感觉该控件的功能非常强大，做出的图表效果也非常美观，用法也并不复杂。现在先讲下Chart控件的部署及一些基本用法。
一、安装Chart控件所需的一些组件：
以上组件在MS网站上均有下载
安装完后打开VS2008，在工具箱中右键选项，添加关于MSCHART组件的两个选项，工具箱中即出现Chart组件。
PS:可下载MSChart.rar，Chart控件的学习手册，内容非常全面，涵盖所有关于Chart的使用方法
二、基本用法：
1.构建一个最简单的图表
[xhtml] view plaincopy
%@ Page Language="C#" AutoEventWireup="true" CodeFile="1.aspx.cs" Inherits="ChartTest_1" %>
<html>
<head>
<title>WebForm1</title>
<meta content="Microsoft Visual Studio 7.0" name="GENERATOR"/>
<meta content="C#" name="CODE_LANGUAGE"/>
<meta content="JavaScript" name="vs_defaultClientScript"/>
<meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema"/>
<link media="all" href="http://www.cnblogs.com/samples.css" mce_href="samples.css" type="text/css" rel="stylesheet" />
</head>
<body>
<p><asp:Chart ID="chart1" runat=server Height="296px" Width="595px"
ImageLocation="~/TempImages/ChartPic_#SEQ(300,3)" Palette=BrightPastel
ImageType=Png BackSecondaryColor=White BackGradientStyle=TopBottom
BackColor="#D3DFF0" BorderlineColor="26,59,105" >
<Legends>
<asp:Legend IsTextAutoFit=false Name="Default" BackColor="Transparent" Font="Trebuchet MS,8.25pt,style=Bold"></asp:Legend>
</Legends>
<BorderSkin SkinStyle=Emboss />
<Series>
<asp:Series Name="Column" BorderColor="180,26,59,105">
<Points>
<asp:DataPoint YValues="45" />
<asp:DataPoint YValues="34" />
<asp:DataPoint YValues="67" />
<asp:DataPoint YValues="31" />
<asp:DataPoint YValues="27" />
<asp:DataPoint YValues="87" />
<asp:DataPoint YValues="45" />
<asp:DataPoint YValues="32" />
</Points>
</asp:Series>
</Series>
<ChartAreas>
<asp:ChartArea Name="ChartArea1" BorderColor="64,64,64,64" BorderDashStyle=Solid BackSecondaryColor=White BackColor="64,165,191,228" ShadowColor=Transparent BackGradientStyle=TopBottom>
<Area3DStyle Rotation="10" Perspective="10" Inclination="15" IsRightAngleAxes=false WallWidth="0" IsClustered=false />
<AxisY LineColor="64,64,64,64">
<LabelStyle Font="Trebuchet MS,8.25pt,style=Bold" />
<MajorGrid LineColor="64,64,64,64" />
</AxisY>
<AxisX LineColor="64,64,64,64">
<LabelStyle Font="Trebuchet MS,8.25pt,style=Bold" />
<MajorGrid LineColor="64,64,64,64" />
</AxisX>
</asp:ChartArea>
</ChartAreas>
</asp:Chart>
</p>
</body>
</html>
.cs代码
[c-sharp] view plaincopy
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Web.UI.DataVisualization.Charting;
public partial class ChartTest_1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Series series = new Series("Spline");
series.ChartType = SeriesChartType.Spline;
series.BorderWidth = 3;
series.ShadowOffset = 2;
series.Points.AddY(45);
series.Points.AddY(34);
series.Points.AddY(67);
series.Points.AddY(31);
series.Points.AddY(27);
series.Points.AddY(87);
series.Points.AddY(45);
series.Points.AddY(32);
chart1.Series.Add(series);
}
}
2.直接在.cs代码中构建图表
[c-sharp] view plaincopy
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Web.UI.DataVisualization.Charting;
public partial class ChartTest_2 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Chart Chart1 = new Chart();
Chart1.Width = 600;
Chart1.Height = 400;
Chart1.RenderType = RenderType.ImageTag;
//此属性决定MSChart生成的图形以何种方式送到客户端，有三种：
//ImageTag，图形在服务端保存为临时文件，并将临时文件的URL作为HTML中<IMG>标签的SRC属性值。而此临时文件的URL规则及临时文件如何生成可由ImageLocation属性确定。
//BinaryStreaming，不在服务端生成图形文件，<IMG>标签的SRC属性值将指向另一个负责生成图形的.aspx页面
//ImageMap，不显示实际的图形，仅创建图片热区（image map）。
//默认值是ImageTag，就是会在服务端生成临时文件。
Chart1.ImageLocation = "..//..//TempImages//ChartPic_#SEQ(200,30)";
Chart1.Palette = ChartColorPalette.BrightPastel;
Title t = new Title("灰常好", Docking.Top, new System.Drawing.Font("Trebuchet MS", 14, System.Drawing.FontStyle.Bold), System.Drawing.Color.FromArgb(26, 59, 105));
Chart1.Titles.Add(t);
Chart1.ChartAreas.Add("Series 1");
Chart1.Series.Add("Series 1");
Chart1.Series.Add("Series 2");
Chart1.Series["Series 1"].Points.AddY(5);
Chart1.Series["Series 1"].Points.AddY(8);
Chart1.Series["Series 1"].Points.AddY(12);
Chart1.Series["Series 1"].Points.AddY(6);
Chart1.Series["Series 1"].Points.AddY(9);
Chart1.Series["Series 1"].Points.AddY(4);
Chart1.Series["Series 2"].Points.AddY(2);
Chart1.Series["Series 2"].Points.AddY(6);
Chart1.Series["Series 2"].Points.AddY(18);
Chart1.Series["Series 2"].Points.AddY(16);
Chart1.Series["Series 2"].Points.AddY(21);
Chart1.Series["Series 2"].Points.AddY(14);
Chart1.Series["Series 1"].ChartType = SeriesChartType.Bar;
Chart1.Series["Series 2"].ChartType = SeriesChartType.Bar;
//图表横向排列
Chart1.Series["Series 1"]["PointWidth"] = "0.6";
Chart1.Series["Series 2"]["PointWidth"] = "0.6";
//图表条柱粗细
Chart1.Series["Series 1"].IsValueShownAsLabel = true;
Chart1.Series["Series 2"].IsValueShownAsLabel = true;
//显示条柱代表数字
Chart1.Series["Series 1"]["BarLabelStyle"] = "Center";
Chart1.Series["Series 2"]["BarLabelStyle"] = "Center";
//数字显示在条柱中间
Chart1.ChartAreas["Series 1"].Area3DStyle.Enable3D = true;
//显示3D效果
Chart1.Series["Series 1"]["DrawingStyle"] = "Cylinder";
Chart1.Series["Series 2"]["DrawingStyle"] = "Cylinder";
//更改条柱形状
Chart1.ChartAreas["Series 1"].Area3DStyle.IsRightAngleAxes = true;
//更改图表视角
Chart1.ChartAreas["Series 1"].Area3DStyle.IsClustered = true;
//更改条柱长度
Chart1.ChartAreas["Series 1"].AxisX.LabelStyle.IsEndLabelVisible = false;
//去掉Y轴多余数字
Chart1.ChartAreas["Series 1"].Area3DStyle.Inclination = 80;
//控制条柱粗细
Chart1.BorderSkin.SkinStyle = BorderSkinStyle.Emboss;
Chart1.BorderlineColor = System.Drawing.Color.FromArgb(26, 59, 105);
Chart1.BorderlineDashStyle = ChartDashStyle.Solid;
Chart1.BorderlineWidth = 2;
Chart1.Legends.Add("Legend1");
Chart1.Page = this;
HtmlTextWriter writer = new HtmlTextWriter(Page.Response.Output);
Chart1.RenderControl(writer);
}
}
3.构建曲线图表
[c-sharp] view plaincopy
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Web.UI.DataVisualization.Charting;
public partial class ChartTest_3 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Chart Chart1 = new Chart();
Chart1.Width = 600;
Chart1.Height = 400;
Chart1.RenderType = RenderType.ImageTag;
Chart1.ImageLocation = "..//..//TempImages//ChartPic_#SEQ(200,30)";
Chart1.Palette = ChartColorPalette.BrightPastel;
Title t = new Title("灰常好", Docking.Top, new System.Drawing.Font("Trebuchet MS", 14, System.Drawing.FontStyle.Bold), System.Drawing.Color.FromArgb(26, 59, 105));
Chart1.Titles.Add(t);
Chart1.ChartAreas.Add("Series1");
Chart1.Series.Add("Series1");
Chart1.Series.Add("Series2");
//构造一个图表
Random random = new Random();
for (int pointIndex = 0; pointIndex < 10; pointIndex++)
{
Chart1.Series["Series1"].Points.AddY(random.Next(45, 95));
Chart1.Series["Series2"].Points.AddY(random.Next(5, 75));
}
//构造随机坐标
Chart1.Series["Series1"].ChartType = SeriesChartType.Line;
Chart1.Series["Series2"].ChartType = SeriesChartType.Spline;//平滑效果线条
Chart1.Series["Series1"].IsValueShownAsLabel = true;
Chart1.Series["Series2"].IsValueShownAsLabel = true;
Chart1.ChartAreas["Series1"].AxisX.IsMarginVisible = true;
Chart1.ChartAreas["Series1"].Area3DStyle.Enable3D = true;
Chart1.Series["Series1"]["ShowMarkerLines"] = "True";
Chart1.Series["Series2"]["ShowMarkerLines"] = "True";
Chart1.BorderSkin.SkinStyle = BorderSkinStyle.Emboss;
Chart1.BorderlineColor = System.Drawing.Color.FromArgb(26, 59, 105);
Chart1.BorderlineDashStyle = ChartDashStyle.Solid;
Chart1.BorderlineWidth = 2;
Chart1.Legends.Add("Legend1");
Chart1.Page = this;
HtmlTextWriter writer = new HtmlTextWriter(Page.Response.Output);
Chart1.RenderControl(writer);
}
}
4.构建饼图表
[c-sharp] view plaincopy
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Web.UI.DataVisualization.Charting;
public partial class ChartTest_4 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Chart Chart1 = new Chart();
Chart1.Width = 600;
Chart1.Height = 400;
Chart1.RenderType = RenderType.ImageTag;
Chart1.ImageLocation = "..//..//TempImages//ChartPic_#SEQ(200,30)";
Chart1.Palette = ChartColorPalette.BrightPastel;
Title t = new Title("灰常好", Docking.Top, new System.Drawing.Font("Trebuchet MS", 14, System.Drawing.FontStyle.Bold), System.Drawing.Color.FromArgb(26, 59, 105));
Chart1.Titles.Add(t);
Chart1.ChartAreas.Add("View");
Chart1.Series.Add("Default");
double[] yValues = { 65.61, 75.54, 60.45, 34.73, 85.42 };
string[] xValues = { "France", "Canada", "Germany", "USA", "Italy" };
Chart1.Series["Default"].Points.DataBindXY(xValues, yValues);
Chart1.Series["Default"].ChartType = SeriesChartType.Pie;
Chart1.Series["Default"]["PieLabelStyle"] = "Outside";
Chart1.Series["Default"]["DoughnutRadius"] = "30";
Chart1.Series["Default"].Points[4]["Exploded"] = "true";
Chart1.ChartAreas["View"].Area3DStyle.Enable3D = true;
//Series series1 = Chart1.Series[0];
//series1["CollectedThreshold"] = "5";
//series1["CollectedThresholdUsePercent"] = "true";
//series1["CollectedLabel"] = "Other";
//series1["CollectedLegendText"] = "Other";
//series1["CollectedSliceExploded"] = "true";
//series1["CollectedColor"] = "Green";
//series1["CollectedToolTip"] = "Other";
//Chart1.Series.Add(series1);
Chart1.BorderSkin.SkinStyle = BorderSkinStyle.Emboss;
Chart1.BorderlineColor = System.Drawing.Color.FromArgb(26, 59, 105);
Chart1.BorderlineDashStyle = ChartDashStyle.Solid;
Chart1.BorderlineWidth = 2;
Chart1.Legends.Add("Legend1");
Chart1.Page = this;
HtmlTextWriter writer = new HtmlTextWriter(Page.Response.Output);
Chart1.RenderControl(writer);
}
}
5.构建DataSource绑定图表
[xhtml] view plaincopy
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="5.aspx.cs" Inherits="ChartTest_5" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>无标题页</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
SelectCommand="select sum(prize) a ,dept from uds_delivery_cost group by dept">
</asp:SqlDataSource>
</div>
</form>
</body>
</html>
cs文件
[c-sharp] view plaincopy
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Web.UI.DataVisualization.Charting;
public partial class ChartTest_5 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Chart Chart1 = new Chart();
Chart1.Width = 600;
Chart1.Height = 400;
Chart1.RenderType = RenderType.ImageTag;
Chart1.ImageLocation = "..//..//TempImages//ChartPic_#SEQ(200,30)";
Chart1.Palette = ChartColorPalette.BrightPastel;
Title t = new Title("灰常好", Docking.Top, new System.Drawing.Font("Trebuchet MS", 14, System.Drawing.FontStyle.Bold), System.Drawing.Color.FromArgb(26, 59, 105));
Chart1.Titles.Add(t);
Chart1.ChartAreas.Add("View");
Chart1.Series.Add("Series1");
Chart1.DataSource = SqlDataSource1;
Chart1.Series["Series1"].XValueMember = "dept";
Chart1.Series["Series1"].YValueMembers = "a";
Chart1.DataBind();
//Chart1.Series["Series1"].ChartType = SeriesChartType.Bar;
Chart1.BorderSkin.SkinStyle = BorderSkinStyle.Emboss;
Chart1.BorderlineColor = System.Drawing.Color.FromArgb(26, 59, 105);
Chart1.BorderlineDashStyle = ChartDashStyle.Solid;
Chart1.BorderlineWidth = 2;
Chart1.Legends.Add("Legend1");
Chart1.Page = this;
HtmlTextWriter writer = new HtmlTextWriter(Page.Response.Output);
Chart1.RenderControl(writer);
}
}
6.进阶数据绑定图表
[c-sharp] view plaincopy
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Web.UI.DataVisualization.Charting;
using System.Data.SqlClient;
using System.Drawing;
public partial class ChartTest_6 : System.Web.UI.Page
{
SqlConnection con;
protected void Page_Load(object sender, EventArgs e)
{
Chart Chart1 = new Chart();
Chart1.Width = 600;
Chart1.Height = 400;
Chart1.RenderType = RenderType.ImageTag;
Chart1.ImageLocation = "..//..//TempImages//ChartPic_#SEQ(300,38)";
Chart1.Palette = ChartColorPalette.BrightPastel;
Title t = new Title("灰常好", Docking.Top, new System.Drawing.Font("Trebuchet MS", 14, System.Drawing.FontStyle.Bold), System.Drawing.Color.FromArgb(26, 59, 105));
Chart1.ChartAreas.Add("View");
Chart1.Series.Add("Series1");
con = new SqlConnection("server=172.16.64.7;database=UDS;User Id=sa;pwd=sa");
string str_sel="select sum(prize) a ,dept from uds_delivery_cost group by dept";
SqlCommand cmd = new SqlCommand(str_sel, con);
con.Open();
SqlDataReader dr = cmd.ExecuteReader();
while (dr.Read())
{
Chart1.Series["Series1"].Points.DataBindXY(dr, "dept", dr, "a");
}
dr.Close();
con.Close();
DataPoint maxValuePoint = Chart1.Series["Series1"].Points.FindMaxByValue();
maxValuePoint.Color = Color.FromArgb(255, 128, 128);
DataPoint minValuePoint = Chart1.Series["Series1"].Points.FindMinByValue();
minValuePoint.Color = Color.FromArgb(128, 128, 255);
Chart1.BorderSkin.SkinStyle = BorderSkinStyle.Emboss;
Chart1.BorderlineColor = System.Drawing.Color.FromArgb(26, 59, 105);
Chart1.BorderlineDashStyle = ChartDashStyle.Solid;
Chart1.BorderlineWidth = 2;
Chart1.Legends.Add("Legend1");
Chart1.Page = this;
HtmlTextWriter writer = new HtmlTextWriter(Page.Response.Output);
Chart1.RenderControl(writer);
}
}
以上都是Chart控件最基本的几种用法，后续有机会涉及到一些复杂用法再发上来。
