asp.net微软图表控件使用示例代码分享

这里给出一个完整攻略，讲解如何使用asp.net微软图表控件，包括实现基础图表的绘制、样式和格式设置以及数据绑定等操作。

准备工作

在开始之前，我们需要准备一些工作，如安装相应的软件、添加图表控件、引用相关命名空间等。下面是具体步骤：

安装软件

首先，我们需要安装Microsoft Visual Studio和ASP.NET Web Forms应用程序开发工具。你可以从Visual Studio官网下载最新版本的Visual Studio，并根据指引安装相关组件。

添加图表控件

接着，我们需要添加Microsoft Chart控件到工具箱中，在Visual Studio中，可以通过以下步骤添加：

1. 打开Visual Studio，然后在工具箱上右键，选择“选择工具箱项…”。

2. 在“选择工具箱项”对话框中，选择“COM组件”选项卡，然后勾选“Microsoft Chart Controls for Microsoft .NET Framework 3.5”。

3. 点击“确定”按钮，控件就会自动添加到工具箱中了。

引用命名空间

最后，我们需要在代码中引用相关的命名空间。在ASP.NET页面的顶部加入以下代码：

<%@ Import Namespace="System.Web.UI.DataVisualization.Charting" %>

引用完毕后，我们就可以开始使用图表控件了。

基础绘图

下面，我们使用示例代码演示如何实现一个简单的柱状图。

步骤一：定义控件

在ASP.NET页面上定义一个Chart控件，如下所示：

<asp:Chart ID="Chart1" runat="server"></asp:Chart>

步骤二：设置数据

为了绘制柱状图，我们需要设置数据。假设有下面这样一个数据集：

public partial class _Default : Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        List<string> categories = new List<string>
        {
            "Jan", "Feb", "Mar", "Apr", "May", "Jun",
            "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
        };

        List<int> values = new List<int>
        {
            100, 200, 300, 400, 500, 600,
            700, 800, 900, 1000, 1100, 1200
        };

        Chart1.Series.Add(new Series("Sales"));

        for (int i = 0; i < categories.Count; i++)
        {
            Chart1.Series["Sales"].Points.AddXY(categories[i], values[i]);
        }
    }
}

在这个示例中，我们创建了两个列表，一个存储分类数据，另一个存储数值数据。然后，我们通过一个for循环，逐一将数据点添加到控件中。

步骤三：设置样式

接下来，我们可以对图表的样式设置进行调整，比如修改标题、轴线、颜色等。我们可以添加一个“ChartArea”元素，来设置图表区域的样式，需要注意的是，每个图表都至少要包含一个“ChartArea”元素。

<asp:Chart ID="Chart1" runat="server">
    <ChartAreas>
        <asp:ChartArea Name="SalesArea">
            <AxisX Title="Month"></AxisX>
            <AxisY Title="Sales (K)"></AxisY>
        </asp:ChartArea>
    </ChartAreas>
</asp:Chart>

在这个示例中，我们为图表区域添加了标题和轴线，并让X轴表示月份，Y轴表示销售额。

步骤四：绘图

最后，我们就可以开始绘图了，将“Series”属性设置为“Sales”，表示我们要绘制柱状图。其他属性如图例、显示格式等可以根据需求进行添加。

<asp:Chart ID="Chart1" runat="server">
    <ChartAreas>
        <asp:ChartArea Name="SalesArea">
            <AxisX Title="Month"></AxisX>
            <AxisY Title="Sales (K)"></AxisY>
        </asp:ChartArea>
    </ChartAreas>
    <Series>
        <asp:Series Name="Sales" ChartType="Column"></asp:Series>
    </Series>
    <Legends>
        <asp:Legend></asp:Legend>
    </Legends>
</asp:Chart>

数据绑定

除了基础绘图，我们还可以通过数据绑定来实现图表的绘制，这种方式更加灵活。

步骤一：准备数据

首先，我们需要定义一个包含数据的数据源。在这个示例中，我们使用ASP.NET内置的数据源“SqlDataSource”绑定数据库中的数据。

<asp:SqlDataSource ID="SalesDataSource" runat="server"
    ConnectionString="Data Source=.;Initial Catalog=Sales;Integrated Security=True"
    SelectCommand="SELECT * FROM MonthlySales"
    ProviderName="System.Data.SqlClient"></asp:SqlDataSource>

步骤二：定义控件

接着，我们定义一个Chart控件，并设置数据绑定。

<asp:Chart ID="SalesChart" runat="server" DataSourceID="SalesDataSource">
    <ChartAreas>
        <asp:ChartArea Name="SalesArea">
            <AxisX Title="Month" ValueMember="Month"></AxisX>
            <AxisY Title="Sales (K)" Interval="100" LabelStyle-Format="{0:C0}"></AxisY>
        </asp:ChartArea>
    </ChartAreas>
    <Series>
        <asp:Series Name="Sales" ChartType="Column" XValueMember="Month" YValueMembers="Sales"></asp:Series>
    </Series>
    <Legends>
        <asp:Legend></asp:Legend>
    </Legends>
</asp:Chart>

在这个示例中，我们设置了X轴和Y轴的名称以及显示格式，并通过“XValueMember”和“YValueMembers”分别指定绑定的数据列。

步骤三：绘图

最后，我们就可以开始绘图了，图表控件会根据绑定的数据自动生成图表，开发人员只需要在设置数据源时进行配置即可。