利用VML生成柱状图和饼图

最新推荐文章于 2025-08-21 19:38:35 发布

转载最新推荐文章于 2025-08-21 19:38:35 发布 · 91 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/hongyuniu/archive/2008/10/22/1316452.html

文章标签：

#c# #ui #javascript #ViewUI

本文介绍了一种使用自定义类和第三方库实现年度销售数据可视化的方法。通过C#及特定DLL和JS文件的支持，实现了基于用户输入年份的销售柱状图和饼图的动态生成。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先下载生成柱状图和饼图要用到的DLL和JS文件（下载）。

第一步，在网站Bin文件夹右键单击添加对刚下载的DLL的引用。将js文件放到网站的js文件夹中。

第二步，在网站App_Code文件夹中添加一个类

Item

using System;

using System.Data;

using System.Configuration;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

/**//// <summary>

/// Item 的摘要说明

/// </summary>

public class Item

{

public Item(string text, decimal value)

{

this._text = text;

this._value = value;

}

private string _text;

public string Text

{

get

{

return _text;

}

private decimal _value;

public decimal Value

{

get

{

return _value;

}

第三步，aspx页面

aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CheckinGramOfYear.aspx.cs"
    Theme="default" Inherits="Financial_CheckinGramOfYear" %>

<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head id="head" runat="server">
    <link rel="stylesheet" href="../App_Themes/Default/show.css" type="text/css" />

    <title>年度销售报表</title>
    <meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1" />
    <meta name="CODE_LANGUAGE" content="C#" />
    <meta name="vs_defaultClientScript" content="JavaScript" />
    <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5" />
    <style>
        v\:* { BEHAVIOR: url(#default#VML) }
        o\:* { BEHAVIOR: url(#default#VML) }
        </style>
</head>
<body>
    <form id="Form1" method="post" runat="server">
        <div class="titlebar">
            年度销售报表</div>
        <div class="container">
            <div class="seccontainer">
                <table class="inputframemain1" cellpadding="0" border="2">
                    <tr>
                        <td>
                             年度: 
                        </td>
                        <td>
                            <asp:TextBox ID="txtYear" runat="server" onfocus="calendar();" Width="90px"></asp:TextBox></td>
                        <td>
                             <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="txtYear"
                                Display="Dynamic" ErrorMessage="不允许为空！" SetFocusOnError="True"></asp:RequiredFieldValidator><asp:RangeValidator
                                    ID="RangeValidator1" runat="server" ControlToValidate="txtYear" Display="Dynamic"
                                    ErrorMessage="请输入正确格式(例:2008)" MaximumValue="9999" MinimumValue="1900" SetFocusOnError="True"
                                    Type="Integer"></asp:RangeValidator> 
                            <asp:Button CssClass="button" ID="btnQuery" runat="server" Text=" 查看 " OnClick="btnQuery_Click" /></td>
                    </tr>
                </table>
                <br />
                <asp:Panel ID="Panel1" runat="server">
                </asp:Panel>
            </div>
        </div>
    </form>
</body>
</html>

CS页面

CS
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using ReportControl;

public partial class Financial_CheckinGramOfYear : SessionTimeout
{
    protected void Page_Load(object sender, System.EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            txtYear.Text = DateTime.Today.Year.ToString();
            ShowGram();
        }
    }

    private ArrayList GetData()
    {
        ArrayList list = new ArrayList();
        DataTable dt = new BLL.FinancialController().GetCheckinOfYear(txtYear.Text);

        foreach (DataRow dr in dt.Rows)
        {
            list.Add(new Item(Convert.ToDateTime(dr["InDate"]).Month.ToString() + "月", Convert.ToDecimal(dr["Checkin"])));
        }

        return list;
    }

    protected void ShowGram()
    {
        WebChart chart = new PieChart();

        chart.ScriptUrl = "~/js/PieChart.js";
        chart.DataSource = GetData();
        chart.DataTextField = "Text";
        chart.DataValueField = "Value";
        chart.DataValueFormat = "{0:c}";
        chart.ReportTitle = "年度销售报表(单位:元)";
        chart.Width = 800;
        chart.Height = 400;
        chart.Left = 45;
        chart.Top = 75;
        chart.DataBind();

        this.Panel1.Controls.Add(chart);
    }
    protected void btnQuery_Click(object sender, EventArgs e)
    {
        ShowGram();
    }
}

报表效果如图：