Chart控件是微软提供的用于制作报表的控件,下载地址http://www.microsoft.com/en-us/download/details.aspx?id=14422
教程 http://archive.msdn.microsoft.com/mschart/Release/ProjectReleases.aspx?ReleaseId=1591
1.添加引用 System.Web.DataVisualization
配置文件文件中会增加三个内容
<httpHandlers> <add path="ChartImg.axd" verb="GET,HEAD,POST" type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler, System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" validate="false" /> </httpHandlers> <pages> <controls> <add tagPrefix="asp" namespace="System.Web.UI.DataVisualization.Charting" assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" /> </controls> </pages>
<assemblies> <add assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/></assemblies> </compilation>
2.前台代码
<asp:Chart ID="Chart1" runat="server" Palette="BrightPastel" BackColor="#F3DFC1" ImageType="Png" ImageLocation="~/TempImages/ChartPic_#SEQ(300,3)" Width="600px" Height="300px" BorderDashStyle="solid" BackGradientStyle="TopBottom" BorderWidth="1" BorderColor="181, 64, 1"> <legends> <asp:Legend Enabled="False" IsTextAutoFit="False" Name="Default" BackColor="Transparent" Font="Trebuchet MS, 8.25pt, style=Bold"> </asp:Legend> </legends> <borderskin skinstyle="Emboss"></borderskin> -- 背景为圆角 <series> -- 曲线的控制 <asp:Series MarkerSize="8" BorderWidth="3" XValueType="Double" Name="Series1" ChartType="Line" MarkerStyle="Circle" ShadowColor="Black" BorderColor="180, 26, 59, 105" Color="220, 65, 140, 240" ShadowOffset="2" YValueType="Double"> </asp:Series> <asp:Series MarkerSize="9" BorderWidth="3" XValueType="Double" Name="Series2" ChartType="Line" MarkerStyle="Diamond" ShadowColor="Black" BorderColor="180, 26, 59, 105" Color="220, 224, 64, 10" ShadowOffset="2" YValueType="Double"> </asp:Series> </series> <chartareas> <asp:ChartArea Name="ChartArea1" BorderColor="64, 64, 64, 64" BorderDashStyle="Solid" BackSecondaryColor="White" BackColor="OldLace" ShadowColor="Transparent" BackGradientStyle="TopBottom"> <Area3DStyle Rotation="25" Perspective="9" LightStyle="Realistic" Inclination="40" IsRightAngleAxes="False" WallWidth="3" IsClustered="False" /> <AxisY LineColor="64, 64, 64, 64" Maximum="100" Minimum="0"> --Y轴 <LabelStyle Font="Trebuchet MS, 8.25pt, style=Bold" /> <MajorGrid LineColor="64, 64, 64, 64" /> </AxisY> <AxisX LineColor="64, 64, 64, 64"> -- X轴 <LabelStyle Font="Trebuchet MS, 8.25pt, style=Bold" /> <MajorGrid LineColor="64, 64, 64, 64" /> </AxisX> </asp:ChartArea> </chartareas> </asp:Chart>
3.后台
using System.Web.UI.DataVisualization.Charting;
protected void Page_Load(object sender, EventArgs e) { // Populate series with random data 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)); } // Set series chart type Chart1.Series["Series1"].ChartType = SeriesChartType.Line; Chart1.Series["Series2"].ChartType = SeriesChartType.Spline; // Set point labels Chart1.Series["Series1"].IsValueShownAsLabel = true; Chart1.Series["Series2"].IsValueShownAsLabel = true; // Enable X axis margin Chart1.ChartAreas["ChartArea1"].AxisX.IsMarginVisible = true; // Enable 3D, and show data point marker lines Chart1.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = true; Chart1.Series["Series1"]["ShowMarkerLines"] = "True"; Chart1.Series["Series2"]["ShowMarkerLines"] = "True"; }