微软的Chart控件的用法-折线图

来源：互联网发布：语音网络编辑：程序博客网时间：2024/05/16 03:22

微软的Chart控件的用法-折线图Aspx页面代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Market.aspx.cs" Inherits="AdminUser_Market" %><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <title></title></head><body>    <form id="form1" runat="server">    <div>    <asp:Chart ID="Chart1" runat="server" BackColor="#D3DFF0" Height="280px" Width="680px" Palette="BrightPastel"      BorderWidth="2" BorderColor="26, 59, 105" BackGradientStyle="TopBottom">               <Legends>                 <asp:Legend Name="Legend1" Enabled="True" LegendStyle="Column"  >                 </asp:Legend>               </Legends>               <%-- 控制小图标的显示格式 --%>               <BorderSkin SkinStyle="Emboss" > </BorderSkin>               <%--<!--控制整个图片边缘的格式 -->--%>               <Series>               <%-- 数据(一个数据集为<asp:Series></asp:Series>)   --%>                    <asp:Series MarkerSize="8" BorderWidth="3" XValueType="Double" Name="企划预算" ChartType="Line" MarkerStyle="Circle" ShadowColor="Black" BorderColor="180, 26, 59, 105" Color="Gold" ShadowOffset="2" YValueType="Double">                            </asp:Series>                            <asp:Series MarkerSize="9" BorderWidth="3" XValueType="Double" Name="企划实施" ChartType="Line" MarkerStyle="Diamond" ShadowColor="Black" BorderColor="180, 26, 59, 105" Color="Red" ShadowOffset="2" YValueType="Double"></asp:Series>               </Series>               <ChartAreas>                 <%-- 作图区的修饰 --%>                 <asp:ChartArea Name="ChartArea1" BorderColor="64, 64, 64, 64" BorderDashStyle="NotSet"                 BackSecondaryColor="White" BackColor="Transparent" ShadowColor="">                           <AxisY LineColor="64, 64, 64, 64">                                <MajorGrid LineColor="64, 64, 64, 64" />                           </AxisY>                           <AxisX LineColor="64, 64, 64, 64">                                <MajorGrid LineColor="64, 64, 64, 64" />                           </AxisX>                 </asp:ChartArea>               </ChartAreas></asp:Chart>    </div>       <%-- <asp:CHART id="Chart1" runat="server" Height="450px">                        <legends>                            <asp:Legend Enabled="true" Alignment="Center" IsTextAutoFit="False" Docking="Bottom" 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="企划预算" 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="企划实施" 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="Transparent" BorderDashStyle="Solid" BackSecondaryColor="White" BackColor="Transparent" 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">                                    <LabelStyle Font="Trebuchet MS, 8.25pt, style=Bold" />                                    <MajorGrid LineColor="64, 64, 64, 64" />                                </axisy>                                <axisx LineColor="64, 64, 64, 64" IntervalAutoMode="VariableCount">                                    <LabelStyle Font="Trebuchet MS, 8.25pt, style=Bold" />                                    <MajorGrid LineColor="64, 64, 64, 64" Enabled="false"/>                                </axisx>                            </asp:ChartArea>                        </chartareas>                    </asp:CHART>--%>    </form></body></html>

.CS文件代码：

using System;using System.Collections.Generic;using System.Data;using System.Drawing;using System.Linq;using System.Web;using System.Web.UI;using System.Web.UI.DataVisualization.Charting;using System.Web.UI.WebControls;public partial class AdminUser_Market : System.Web.UI.Page{    protected void Page_Load(object sender, EventArgs e)    {       //chart 代表整个图片；  legends 代表数据显示标识；  Series 图片中的数据集；  ChartAreas 代表图片中的绘图区（里面能包含多个Series数据集的显示）；         Chart1.BackColor = Color.Azure;           //图片背景色        Title t2 = new Title("订单月份客单价曲线图", Docking.Top, new System.Drawing.Font("宋体", 12, System.Drawing.FontStyle.Bold), System.Drawing.Color.FromArgb(26, 59, 105));//图片标题        Chart1.Titles.Add(t2);        //数据集显示属性设置       // 数据集""显示属性设置        Series series1 = new Series();        //数据集声明          series1.ChartType = SeriesChartType.Spline;   //数据显示方式 Line:为折线  Spline:曲线         series1.Color = Color.Gold;                //线条颜色        series1.BorderWidth = 2;                    //线条宽度        series1.ShadowOffset = 1;                   //阴影宽度        series1.IsVisibleInLegend = false;           //是否显示线条数据说明        series1.IsValueShownAsLabel = true;        //线条上是否指定的数据        series1.MarkerStyle = MarkerStyle.Circle;   //线条上的数据点标志类型        series1.MarkerSize = 8;                     // 标志的大小        Series series2 = new Series();        series2.ChartType = SeriesChartType.Spline;   //数据显示方式 Line:为折线  Spline:曲线         series2.Color = Color.Red;                //线条颜色        series2.BorderWidth = 2;                    //线条宽度        series2.ShadowOffset = 1;                   //阴影宽度        series2.IsVisibleInLegend = false;           //是否显示线条数据说明        series2.IsValueShownAsLabel = true;        //线条上是否指定的数据        series2.MarkerStyle = MarkerStyle.Circle;   //线条上的数据点标志类型        series2.MarkerSize = 8;            //数据源        for (int i = 0; i < 12;i++ )        {            series1.Points.AddXY(i.ToString() + "月",500); //分别往X,Y轴添加数据(可以为多种类型)    （有多中添加方式）            series2.Points.AddXY(i.ToString() + "月", 200);        }        Chart1.Series.Add(series1);//把数据集添加到chart中        Chart1.Series.Add(series2);//把数据集添加到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 = 1;        Chart1.ChartAreas["ChartArea1"].AxisY.LineWidth = 1;        Chart1.ChartAreas["ChartArea1"].AxisX.Title = "月份";        Chart1.ChartAreas["ChartArea1"].AxisY.Title = "销量";       // 中间X,Y线条的颜色设置        Chart1.ChartAreas["ChartArea1"].AxisX.LineDashStyle = ChartDashStyle.DashDotDot;        Chart1.ChartAreas["ChartArea1"].AxisY.MajorGrid.LineColor = Color.Blue;       // X.Y轴数据显示间隔        Chart1.ChartAreas["ChartArea1"].AxisX.Interval = 1;  //X轴数据显示间隔        Chart1.ChartAreas["ChartArea1"].AxisY.Interval = 300;//Y轴数据显示间隔       // X轴线条显示间隔        Chart1.ChartAreas["ChartArea1"].AxisX.MajorGrid.Interval = 1;        //this.Chart1.ChartAreas["ChartArea1"].AxisX.MajorGrid.LineColor = Color.Blue;        //this.Chart1.ChartAreas["ChartArea1"].AxisY.MajorGrid.LineColor = Color.Blue;        //this.Chart1.ChartAreas["ChartArea1"].AxisY.Interval =100;        Chart1.AlignDataPointsByAxisLabel();    }}

希望以上分享对初学朋友有些帮助，谢谢！
更多关注付义方技术博客：http://blog.csdn.net/fuyifang
或者直接用手机扫描二维码查看更多博文：
付义方CSDN博客二维码
Author : 付义方

0 0