实现效果：
技术实现：
前台代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="ASPNet探秘._Default" %>
<%@ Register Assembly="System.Web.DataVisualization, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
Namespace="System.Web.UI.DataVisualization.Charting" TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>使用MS图表控件创建基本报表</title>
</head>
<body>
<form id="form1" runat="server">
<div style="float:left">
<asp:chart id="Chart" runat="server" Height="296px" Width="600px"
Palette="BrightPastel"
BorderDashStyle="Solid" BackSecondaryColor="White"
BackGradientStyle="None" BorderWidth="2" backcolor="#D3DFF0"
BorderColor="26, 59, 105">
<Legends>
<asp:Legend BackColor="Transparent" Docking="Bottom" Alignment="Center" IsTextAutoFit="true" Name="Legend" Font="Trebuchet MS, 8.25pt, style=Bold"/>
</Legends>
<BorderSkin SkinStyle="Emboss" />
<Series>
<asp:Series Name="Column" BorderColor="180, 26, 59, 105" LegendText="月统计数据" ChartType="Column">
<Points>
<asp:DataPoint YValues="60" AxisLabel="一月份" />
<asp:DataPoint YValues="45" AxisLabel="二月份"/>
<asp:DataPoint YValues="78" AxisLabel="三月份" />
<asp:DataPoint YValues="56" AxisLabel="四月份"/>
<asp:DataPoint YValues="38" AxisLabel="五月份" />
<asp:DataPoint YValues="84" AxisLabel="六月份"/>
<asp:DataPoint YValues="48" AxisLabel="七月份" />
<asp:DataPoint YValues="41" AxisLabel="八月份"/>
<asp:DataPoint YValues="65" AxisLabel="九月份" />
<asp:DataPoint YValues="75" AxisLabel="十月份"/>
<asp:DataPoint YValues="88" AxisLabel="十一月份" />
<asp:DataPoint YValues="64" AxisLabel="十二月份"/>
</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">
<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>
</div>
<div style="float:right">
<asp:chart id="Chart1" runat="server" Height="296px" Width="380px"
Palette="BrightPastel"
BorderDashStyle="Solid" BackSecondaryColor="White"
BackGradientStyle="None" BorderWidth="2" backcolor="#D3DFF0"
BorderColor="26, 59, 105">
<Legends>
<asp:Legend BackColor="Transparent" Docking="Bottom" Alignment="Center" IsTextAutoFit="true" Name="Legend" Font="Trebuchet MS, 8.25pt, style=Bold"/>
</Legends>
<BorderSkin SkinStyle="Emboss" />
<Series>
<asp:Series Name="Column" BorderColor="180, 26, 59, 105" LegendText="周统计数据" ChartType="Pie">
<Points>
<asp:DataPoint YValues="60" AxisLabel="60" LegendText="第一周" />
<asp:DataPoint YValues="45" AxisLabel="45" LegendText="第二周"/>
<asp:DataPoint YValues="78" AxisLabel="78" LegendText="第三周"/>
<asp:DataPoint YValues="56" AxisLabel="56" LegendText="第四周"/>
</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">
<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>
</div>
</form>
</body>
</html>
后台代码：
using System;
using System.Web.UI.DataVisualization.Charting;
namespace ASPNet探秘
{
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
//后台动态加载数据
Series series = new Series("LineSeries");
series.ChartType = SeriesChartType.Spline;
series.LegendText = "折线数据";
series.BorderWidth = 3;
series.ShadowOffset = 2;
series.Points.AddY(30);
series.Points.AddY(42);
series.Points.AddY(36);
series.Points.AddY(78);
series.Points.AddY(46);
series.Points.AddY(65);
series.Points.AddY(41);
series.Points.AddY(35);
series.Points.AddY(87);
series.Points.AddY(75);
series.Points.AddY(36);
series.Points.AddY(52);
series.Points.AddY(74);
this.Chart.Series.Add(series);
}
}
}
}
注：此文章转载至白衣轩