微软的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
或者直接用手机扫描二维码查看更多博文： 
Author : 付义方
时间： 2024-08-02 01:07:28