.NET MSChart画图：曲线，柱形，曲线叠加图，以及配置，下载示意图

下载地址： .NET Framework 3.5 SP1 的 ASP.NET 和 Windows 窗体图表控件 http://www.microsoft.com/downloads/details.aspx?displaylang=zh-cn&FamilyID=130f7986-bf49-4fe5-9ca8-910ae6ea442c Microsoft .NET Framework 3.5 Service pack 1 (Full Package) - 简体中文 http://www.microsoft.com/downloads/details.aspx?familyid=D0E5DEA7-AC26-4AD7-B68C-FE5076BBA986&displaylang=zh-cn Microsoft Visual Studio 2008 Service Pack 1（exe） http://www.microsoft.com/downloads/details.aspx?familyid=FBEE1648-7106-44A7-9649-6D9F6D58056E&displaylang=zh-cn 2.安装MSChart控件。 3.在使用时必须在项目中的web.canfig中添加一些内容。 二 使用 安装好后，建立一个.NET3.5的Web项目，像使用普通控件一样拖放到要使用的Web界面即可。初步研究了一下，整个图形控件主要由以下几个部份组成： 1.Annotations --图形注解集合 2.ChartAreas --图表区域集合 3.Legends --图例集合 4.Series　　　 --图表序列集合（即图表数据对象集合） 5.Titles　　　　--图标的标题集合 Annotations注解集合 Annotations是一个对图形的一些注解对象的集合，所谓注解对象，类似于对某个点的详细或者批注的说明，比如，在图片上实现各个节点的关键信息，如下图方框和黄色的小方框： 一个图形上可以拥有多个注解对象，可以添加十多种图形样式的注解对象，包括常见的箭头、云朵、矩行、图片等等注解符号，通过各个注解对象的属性，可以方便的设置注解对象的放置位置、呈现的颜色、大小、文字内容样式等常见的属性。 ChartAreas图表区域集合 ChartAreas可以理解为是一个图表的绘图区，例如，你想在一幅图上呈现两个不同属性的内容，一个是用户流量，另一个则是系统资源占用情况，那么你要在一个图形上绘制这两种情况，明显是不合理的，对于这种情况，可以建立两个ChartArea，一个用于呈现用户流量，另一个则用于呈现系统资源的占用情况。 当然了，图表控件并不限制你添加多少个绘图区域，你可以根据你的需要进行添加。对于每一个绘图区域，你可以设置各自的属性，如：X,Y轴属性、背景等。 需要注意的是，绘图区域只是一个可以作图的区域范围，它本身并不包含要作图形的各种属性数据。 多绘图区效果图如下，分为上下两个绘图区域，分别表示不同的绘图数据： Legends图例集合 Legends是一个图例的集合，即标注图形中各个线条或颜色的含义，同样，一个图片也可以包含多个图例说明，比如像上面说的多个图表区域的方式，则可以建立多个图例，每别说明各个绘图区域的信息，具体的图例配置说明此处就不详细说明了，可以参考一下官网的例子，写得丰富的详细了：）也上一张图例的效果图吧~ Series图表序列 图表序列，应该是整个绘图中最关键的内容了，通俗点说，即是实际的绘图数据区域，实际呈现的图形形状，就是由此集合中的每一个图表来构成的，可以往集合里面添加多个图表，每一个图表可以有自己的绘制形状、样式、独立的数据等。 需要注意的是，每一个图表，你可以指定它的绘制区域（见ChartAreas的说明），让此图表呈现在某个绘图区域，也可以让几个图表在同一个绘图区域叠加，如下图： 上面两幅图，分别表示了把图表放在不同的绘制区域和放在同一个绘制区域的情况。 继续回到ChartAreas章节举的例子，同时要显示用户的流量还要显示系统的占用情况，对于这种时候，应该建立两个Series，一个用于呈现用户的流量，另一个则用于呈现系统的占用情况。它们分别属于各自的绘图区域。 Titles标题合集 根据字面含义即可以理解，是图表的标题配置，同样可以添加多个标题，以及设置标题的样式及文字、位置等属性。多看一下它的属性即能明白各自的含义。 三。其它属性 相对来说，我觉得比较有用的属性有三个，分别是：Label、Tooltip以及Url链接。 Label即标签的含义，可以在图片的关键位置进行一些关键数字或文字的描述，如下图： 像上图：X轴和Y轴的文字便是标签，以及图表曲线中的红点上的文字，也是标签，添加了标签，可以让人更容易的对内容进行理解。 Tooltip即提示的含义，用于在各个关键点，如：标签、图形关键点、标题等当鼠标移动上去的时候，提示用户一些相关的详细或说明信息，例如上图，可以给曲线中的每一个点增加Tooltip的属性，写上需要详细说明的内容，比如：详细的销售明细，那么，在鼠标移动到这个点的时候，会自动弹出提示信息。 Tooltip可以支持简单方式以及自定义的方式，简单方式即像平时Html页面设置的title之类的属性效果，而自定义的方式，则可以实现图形、文本等各种复杂的提示信息显示。详细的方式请参考官方例子的：Interactivity and AJAX/Tooltips以及Interactivity and AJAX/Client Side Scripts下面的相关例子。 Url链接，图表控件中，有一大半的控件都有Url及Tooltip的属性，你可以设置此属性，在鼠标点击的时候，代到其它相应的页面去。 三，效果图形示例 四 html代码 1)曲线图 <%-- 控制小图标的显示格式 --%> <%-- --%> <%-- 数据(一个数据集为 ) --%> <%-- 作图区的修饰 --%> 2)柱形图 <%-- 控制小图标的显示格式 --%> <%-- --%> <%-- 数据(一个数据集为 ) --%> <%-- 作图区的修饰 --%> 3)曲线图叠加 <%-- 控制小图标的显示格式 --%> <%-- --%> <%-- 数据(一个数据集为 ) --%> <%-- 作图区的修饰 --%> 五 aspx.cs 源代码 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.Drawing; public partial class zhishuo_xuqiu : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { #region 曲线图 //************************************绘图区******************************************** //chart 代表整个图片； legends 代表数据显示标识； Series 图片中的数据集； ChartAreas 代表图片中的绘图区（里面能包含多个Series数据集的显示）； //数据源 int[] test1 = { 80, 70, 90, 10, 80, 60, 50, 40, 30, 20, 10, 60 }; // //图片属性设置 // chart1.Width = (test.Count() * 25 + 200) >= 400 ? test.Count() * 25 + 200 : 400; //图片宽度 chart1.Width = 670; chart1.Height = 400; //图片高度 chart1.BackColor = Color.Azure; //图片背景色 Title t2 = new Title("人才需求指数曲线图", Docking.Top, new System.Drawing.Font("宋体", 14, System.Drawing.FontStyle.Bold), System.Drawing.Color.FromArgb(26, 59, 105));//图片标题 chart1.Titles.Add(t2); //数据集显示属性设置 //数据集""显示属性设置 Series series1 = new Series("需求指数"); //数据集声明 series1.ChartType = SeriesChartType.Line; //数据显示方式 Line:为折线 Spline:曲线 series1.Color = Color.Green; //线条颜色 series1.BorderWidth = 2; //线条宽度 series1.ShadowOffset = 1; //阴影宽度 series1.IsVisibleInLegend = false; //是否显示线条数据说明 series1.IsValueShownAsLabel = true; //线条上是否指定的数据 series1.MarkerStyle = MarkerStyle.Circle; //线条上的数据点标志类型 series1.MarkerSize = 8; // 标志的大小 DateTime date1 = DateTime.Now.Date; for (int i = 0; i < test1.Count(); i++) //向数据集绑定数据 { series1.Points.AddXY((i + 1).ToString() + "月", test1[i]); //分别往X,Y轴添加数据(可以为多种类型) （有多中添加方式） } chart1.Series.Add(series1); //把数据集添加到chart中 //作图区的显示属性设置 chart1.ChartAreas["ChartArea1"].AxisX.IsMarginVisible = false; chart1.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = false; //背景色设置 chart1.ChartAreas["ChartArea1"].ShadowColor = Color.Transparent; chart1.ChartAreas["ChartArea1"].BackColor = Color.Azure; //该处设置为了由天蓝到白色的逐渐变化 chart1.ChartAreas["ChartArea1"].BackGradientStyle = GradientStyle.TopBottom; chart1.ChartAreas["ChartArea1"].BackSecondaryColor = Color.White; //X,Y坐标线颜色和大小 chart1.ChartAreas["ChartArea1"].AxisX.LineColor = Color.Blue; chart1.ChartAreas["ChartArea1"].AxisY.LineColor = Color.Blue; chart1.ChartAreas["ChartArea1"].AxisX.LineWidth = 2; chart1.ChartAreas["ChartArea1"].AxisY.LineWidth = 2; // chart1.ChartAreas["ChartArea1"].AxisY.Title = "需求量"; // chart1.ChartAreas["ChartArea1"].AxisX.Title = "月份"; //中间X,Y线条的颜色设置 chart1.ChartAreas["ChartArea1"].AxisX.MajorGrid.LineColor = Color.Blue; chart1.ChartAreas["ChartArea1"].AxisY.MajorGrid.LineColor = Color.Blue; //X.Y轴数据显示间隔 chart1.ChartAreas["ChartArea1"].AxisX.Interval = 1; //X轴数据显示间隔 chart1.ChartAreas["ChartArea1"].AxisY.Interval = 10; //X轴线条显示间隔 chart1.ChartAreas["ChartArea1"].AxisX.MajorGrid.Interval = 1; //******************************************************************************************** #endregion #region 柱形图 //************************************绘图区******************************************** //chart 代表整个图片； legends 代表数据显示标识； Series 图片中的数据集； ChartAreas 代表图片中的绘图区（里面能包含多个Series数据集的显示）； //数据源 int[] test2 = { 80, 70, 90, 10, 80, 60, 50, 40, 30, 20, 10, 60 }; // //图片属性设置 // chart1.Width = (test.Count() * 25 + 200) >= 400 ? test.Count() * 25 + 200 : 400; //图片宽度 chart2.Width = 670; chart2.Height = 400; //图片高度 chart2.BackColor = Color.Azure; //图片背景色 Title t1 = new Title("人才需求指数柱形图", Docking.Top, new System.Drawing.Font("宋体", 14, System.Drawing.FontStyle.Bold), System.Drawing.Color.FromArgb(26, 59, 105));//图片标题 chart2.Titles.Add(t1); //数据集显示属性设置 //数据集""显示属性设置 Series series2 = new Series("需求指数"); //数据集声明 series2.ChartType = SeriesChartType.Column; //数据显示方式 Line:为折线 Spline:曲线 series2.Color = Color.Green; //线条颜色 series2.BorderWidth = 2; //线条宽度 series2.ShadowOffset = 1; //阴影宽度 series2.IsVisibleInLegend = false; //是否显示线条数据说明 series2.IsValueShownAsLabel = true; //线条上是否指定的数据 series2.MarkerStyle = MarkerStyle.None; //线条上的数据点标志类型 series2.MarkerSize = 8; // 标志的大小 // DateTime date1 = DateTime.Now.Date; for (int i = 0; i < test1.Count(); i++) //向数据集绑定数据 { series2.Points.AddXY((i + 1).ToString()+"月", test2[i]); //分别往X,Y轴添加数据(可以为多种类型) （有多中添加方式） // date1 = date1.AddDays(1); } chart2.Series.Add(series2); //把数据集添加到chart中 //作图区的显示属性设置 chart2.ChartAreas["ChartArea1"].AxisX.IsMarginVisible = false; chart2.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = false; //背景色设置 chart2.ChartAreas["ChartArea1"].ShadowColor = Color.Transparent; chart2.ChartAreas["ChartArea1"].BackColor = Color.Azure; //该处设置为了由天蓝到白色的逐渐变化 chart2.ChartAreas["ChartArea1"].BackGradientStyle = GradientStyle.TopBottom; chart2.ChartAreas["ChartArea1"].BackSecondaryColor = Color.White; //X,Y坐标线颜色和大小 chart2.ChartAreas["ChartArea1"].AxisX.LineColor = Color.Blue; chart2.ChartAreas["ChartArea1"].AxisY.LineColor = Color.Blue; chart2.ChartAreas["ChartArea1"].AxisX.LineWidth = 2; chart2.ChartAreas["ChartArea1"].AxisY.LineWidth = 2; // chart2.ChartAreas["ChartArea1"].AxisY.Title = "需求量"; // chart2.ChartAreas["ChartArea1"].AxisX.Title = "月份"; //中间X,Y线条的颜色设置 chart2.ChartAreas["ChartArea1"].AxisX.MajorGrid.LineColor = Color.Blue; chart2.ChartAreas["ChartArea1"].AxisY.MajorGrid.LineColor = Color.Blue; //X.Y轴数据显示间隔 chart2.ChartAreas["ChartArea1"].AxisX.Interval = 1; //X轴数据显示间隔 chart2.ChartAreas["ChartArea1"].AxisY.Interval = 10; //X轴线条显示间隔 chart2.ChartAreas["ChartArea1"].AxisX.MajorGrid.Interval = 1; //******************************************************************************************** #endregion #region 同比图 //************************************绘图区******************************************** //chart 代表整个图片； legends 代表数据显示标识； Series 图片中的数据集； ChartAreas 代表图片中的绘图区（里面能包含多个Series数据集的显示）； //数据源 int[] test3 = { 80, 70, 90, 10, 80, 60, 50, 40, 30, 20, 10, 60 }; // int[] test4 = { 70, 80, 60, 20, 50, 20, 80, 30, 70, 10, 20, 90 }; // int[] test5 = { 60, 90, 70, 30, 60, 30, 90, 40, 80, 110, 30, 70 }; //图片属性设置 // chart1.Width = (test.Count() * 25 + 200) >= 400 ? test.Count() * 25 + 200 : 400; //图片宽度 chart3.Width = 710; chart3.Height = 400; //图片高度 chart3.BackColor = Color.Azure; //图片背景色 Title t3 = new Title("人才需求同比图", Docking.Top, new System.Drawing.Font("宋体", 14, System.Drawing.FontStyle.Bold), System.Drawing.Color.FromArgb(26, 59, 105));//图片标题 chart3.Titles.Add(t3); //数据集显示属性设置 //数据集""显示属性设置 Series series3 = new Series("09年"); //数据集声明 series3.ChartType = SeriesChartType.Line; //数据显示方式 Line:为折线 Spline:曲线 series3.Color = Color.Green; //线条颜色 series3.BorderWidth = 2; //线条宽度 series3.ShadowOffset = 1; //阴影宽度 series3.IsVisibleInLegend = true; //是否显示线条数据说明 series3.IsValueShownAsLabel = true; //线条上是否指定的数据 series3.MarkerStyle = MarkerStyle.Circle; //线条上的数据点标志类型 series3.MarkerSize = 6; // 标志的大小 // DateTime date1 = DateTime.Now.Date; for (int i = 0; i < test1.Count(); i++) //向数据集绑定数据 { series3.Points.AddXY((i + 1).ToString() + "月", test3[i]); //分别往X,Y轴添加数据(可以为多种类型) （有多中添加方式） // date1 = date1.AddDays(1); } chart3.Series.Add(series3); //把数据集添加到chart中 //数据集"内销"显示属性设置 Series series4 = new Series("08年"); series4.ChartType = SeriesChartType.Line; //数据显示方式 Line:为折线 Spline:曲线 series4.Color = Color.Red; //线条颜色 series4.BorderWidth = 2; //线条宽度 series4.ShadowOffset = 1; //阴影宽度 series4.IsVisibleInLegend = true; //是否显示数据说明 series4.IsValueShownAsLabel = true; //线条上是否给吃数据的显示 series4.MarkerStyle = MarkerStyle.Circle; //线条上的数据点标志类型 series4.MarkerSize = 6; // 标志的大小 //DateTime date = DateTime.Now.Date; for (int i = 0; i < test4.Count(); i++) { series4.Points.AddXY((i + 1).ToString() + "月", test4[i]); // date = date.AddDays(1); } chart3.Series.Add(series4); //数据集"内销"显示属性设置 Series series5 = new Series("07年"); series5.ChartType = SeriesChartType.Line; //数据显示方式 Line:为折线 Spline:曲线 series5.Color = Color.DarkBlue; //线条颜色 series5.BorderWidth = 2; //线条宽度 series5.ShadowOffset = 1; //阴影宽度 series5.IsVisibleInLegend = true; //是否显示数据说明 series5.IsValueShownAsLabel = true; //线条上是否给吃数据的显示 series5.MarkerStyle = MarkerStyle.Circle; //线条上的数据点标志类型 series5.MarkerSize = 6; // 标志的大小 //DateTime date = DateTime.Now.Date; for (int i = 0; i < test4.Count(); i++) { series5.Points.AddXY((i + 1).ToString() + "月", test5[i]); // date = date.AddDays(1); } chart3.Series.Add(series5); //作图区的显示属性设置 chart3.ChartAreas["ChartArea1"].AxisX.IsMarginVisible = false; chart3.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = false; //背景色设置 chart3.ChartAreas["ChartArea1"].ShadowColor = Color.Transparent; chart3.ChartAreas["ChartArea1"].BackColor = Color.Azure; //该处设置为了由天蓝到白色的逐渐变化 chart3.ChartAreas["ChartArea1"].BackGradientStyle = GradientStyle.TopBottom; chart3.ChartAreas["ChartArea1"].BackSecondaryColor = Color.White; //X,Y坐标线颜色和大小 chart3.ChartAreas["ChartArea1"].AxisX.LineColor = Color.Blue; chart3.ChartAreas["ChartArea1"].AxisY.LineColor = Color.Blue; chart3.ChartAreas["ChartArea1"].AxisX.LineWidth = 2; chart3.ChartAreas["ChartArea1"].AxisY.LineWidth = 2; // chart3.ChartAreas["ChartArea1"].AxisY.Title = "需求量"; // chart3.ChartAreas["ChartArea1"].AxisX.Title = "月份"; //中间X,Y线条的颜色设置 chart3.ChartAreas["ChartArea1"].AxisX.MajorGrid.LineColor = Color.Blue; chart3.ChartAreas["ChartArea1"].AxisY.MajorGrid.LineColor = Color.Blue; //X.Y轴数据显示间隔 chart3.ChartAreas["ChartArea1"].AxisX.Interval = 1; //X轴数据显示间隔 chart3.ChartAreas["ChartArea1"].AxisY.Interval = 10; //X轴线条显示间隔 chart3.ChartAreas["ChartArea1"].AxisX.MajorGrid.Interval = 1; //******************************************************************************************** #endregion } }