Chart控件的多种使用方法

Dear 丶 2022-04-22 14:50 421阅读 0赞

花了近一周时间专门研究.net 3.5平台提供的Chart控件的使用方法，感觉该控件的功能很强大，做出的图表效果也很美观，使用方法也并不复杂。如今先讲下Chart控件的部署及一些基本使用方法。

一、安装Chart控件所需的一些组件：

![Chart.jpg][]

以上组件在MS站点上均有下载

安装完后打开VS2008，在工具箱中右键选项，加入关于MSCHART组件的两个选项，工具箱中即出现Chart组件。

PS:可下载MSChart.rar，Chart控件的学习手冊，内容很全面，涵盖全部关于Chart的用法

二、基本使用方法：

1.构建一个最简单的图表

%@ 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="../../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代码

2.直接在.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; 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生成的图形以何种方式送到client，有三种： //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); \} \}

[Chart.jpg]: /images/20220327/f4ce519d586c4d44b74288a397145fea.png