ASP.NET WebForm C#用AjaxControlToolkit v20.1折线图绑库报错求助

问题背景 #

数据库存储的月度数据如下：

对应的SQL查询语句：

SELECT 
    DATENAME(MONTH, pay_date) AS month,
    SUM(pay_admin_fee_mur) AS total_collected_amount,
    SUM(pay_amount_mur) AS Admincut
FROM 
    tbl_payment
WHERE
    tbl_payment.cha_id IS NOT NULL
    AND
    FORMAT(pay_date,'yyyy') = '2023'
GROUP BY 
    DATENAME(MONTH, pay_date), YEAR(pay_date)
ORDER BY 
    month;

ASPX页面代码：

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder2" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="head" runat="server">

    <ajaxToolkit:LineChart ID="LineChart1" runat="server" BackColor="64, 0, 0"   
        BackGradientStyle="LeftRight" Height="550px" Palette="None"   
        PaletteCustomColors="192, 0, 0" Width="550px" ChartType="Basic" BaseLineColor="black">
        <Series>
            <ajaxToolkit:LineChartSeries LineColor="Darkblue" Name="Amount collected" Data=""/>           
             <ajaxToolkit:LineChartSeries LineColor="Maroon" Name="Admin cut" Data=""/>            
        </Series>           
    </ajaxToolkit:LineChart>
</asp:Content>

两种尝试的错误分析 #

方法1错误说明 #

后台代码尝试使用LineChart1.Series[0].Points.AddXY()添加数据，报错LineChartSeries does not contain a definition for Points。原因是AjaxControlToolkit的LineChartSeries没有Points集合属性，该控件的数据绑定是通过Data属性直接赋值decimal数组实现的，不是逐个添加点。

方法2错误说明 #

后台代码尝试用字符串拼接方式给Data赋值，报错两个问题：

1. Data属性类型是decimal[]，不是字符串，无法直接拼接字符串赋值；
2. decimal[]没有TrimEnd方法，不能像字符串那样处理末尾逗号。

正确实现代码 #

修改后台代码，先收集数据到列表，再转成数组赋值给Series的Data，同时设置X轴的分类标签：

public partial class charityeventanalysis : System.Web.UI.Page
{
    private string _conString = WebConfigurationManager.ConnectionStrings["FARMSdb"].ConnectionString;
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            List<string> months = new List<string>();
            List<decimal> collectedAmounts = new List<decimal>();
            List<decimal> adminCuts = new List<decimal>();

            // 从数据库获取数据
            using (SqlConnection connection = new SqlConnection(_conString))
            {
                string query = @"SELECT DATENAME(MONTH, pay_date) AS month, 
                                       SUM(pay_admin_fee_mur) AS total_collected_amount, 
                                       SUM(pay_amount_mur) AS Admincut 
                                FROM tbl_payment 
                                WHERE tbl_payment.cha_id IS NOT NULL 
                                  AND FORMAT(pay_date,'yyyy') = '2023' 
                                GROUP BY DATENAME(MONTH, pay_date), YEAR(pay_date) 
                                ORDER BY MONTH(pay_date);"; // 修改排序方式，保证月份按自然顺序排列

                using (SqlCommand command = new SqlCommand(query, connection))
                {
                    connection.Open();
                    using (SqlDataReader reader = command.ExecuteReader())
                    {
                        while (reader.Read())
                        {
                            months.Add(reader["month"].ToString());
                            collectedAmounts.Add(Convert.ToDecimal(reader["total_collected_amount"]));
                            adminCuts.Add(Convert.ToDecimal(reader["Admincut"]));
                        }
                    }
                }
            }

            // 绑定数据到折线图
            LineChart1.Series[0].Data = collectedAmounts.ToArray();
            LineChart1.Series[1].Data = adminCuts.ToArray();
            // 设置X轴的分类标签
            LineChart1.Categories = months.ToArray();
            LineChart1.ChartTitle = "Yearly collection amount MUR (Rs)";
        }
    }
}

关键修改说明 #

1. 用List<decimal>分别收集两个系列的数据，最后转成decimal[]赋值给Series[0].Data和Series[1].Data；
2. 用List<string>收集月份，转成string[]赋值给LineChart1.Categories，作为X轴的标签；
3. 修改SQL的ORDER BY为MONTH(pay_date)，确保月份按自然顺序（9月、10月、11月）排列，而不是按字母顺序（November、October、September）。

内容的提问来源于stack exchange，提问作者danny