实现效果：
技术实现：
前台代码：
<%@ 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" "">
<html xmlns="" >
<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);
} } }}
注：此文章转载至