如何用C#/ASP.NET基于SQL结果集填充DataTable作为Chart.js数据源？

我来给你一步步拆解这个需求，其实核心就是后端从SQL拿到数据转成前端能识别的格式，再用Chart.js渲染出来，下面分Web Forms和ASP.NET Core两种常见场景给你示例，你可以根据自己的项目类型选。

第一步：后端处理（从SQL获取DataTable并转JSON） #

不管是哪种ASP.NET框架，第一步都是先从数据库拿到数据填充DataTable，再转成JSON格式返回给前端——因为Chart.js需要的是JSON结构的数据。

场景1：ASP.NET Web Forms #

首先在页面里写一个WebMethod（要标记为static），用来处理数据库查询和数据序列化：

using System;
using System.Data;
using System.Data.SqlClient;
using System.Web.Services;
using Newtonsoft.Json; // 记得通过NuGet安装Newtonsoft.Json包

public partial class SalesChart : System.Web.UI.Page
{
    [WebMethod]
    public static string GetSalesData()
    {
        // 从Web.config里读取数据库连接字符串
        string connStr = System.Configuration.ConfigurationManager.ConnectionStrings["YourDBConn"].ConnectionString;
        DataTable dt = new DataTable();

        // 用using块确保资源自动释放
        using (SqlConnection conn = new SqlConnection(connStr))
        {
            // 替换成你的实际查询语句，建议用参数化查询防注入
            string query = "SELECT ProductCategory, TotalSales FROM QuarterlySales";
            SqlCommand cmd = new SqlCommand(query, conn);
            
            conn.Open();
            SqlDataAdapter da = new SqlDataAdapter(cmd);
            da.Fill(dt); // 填充DataTable
        }

        // 把DataTable转成JSON字符串返回
        return JsonConvert.SerializeObject(dt);
    }
}

场景2：ASP.NET Core #

如果是Core项目，写一个API控制器更规范：

using Microsoft.AspNetCore.Mvc;
using System.Data;
using System.Data.SqlClient;

[ApiController]
[Route("api/chart")]
public class ChartDataController : ControllerBase
{
    private readonly IConfiguration _config;

    // 通过依赖注入获取配置
    public ChartDataController(IConfiguration config)
    {
        _config = config;
    }

    [HttpGet("sales")]
    public IActionResult GetSalesData()
    {
        string connStr = _config.GetConnectionString("YourDBConn");
        DataTable dt = new DataTable();

        using (SqlConnection conn = new SqlConnection(connStr))
        {
            string query = "SELECT ProductCategory, TotalSales FROM QuarterlySales";
            SqlCommand cmd = new SqlCommand(query, conn);
            
            conn.Open();
            SqlDataAdapter da = new SqlDataAdapter(cmd);
            da.Fill(dt);
        }

        // ASP.NET Core会自动把DataTable序列化为JSON返回
        return Ok(dt);
    }
}

第二步：前端用Chart.js渲染图表 #

前端需要做两件事：调用后端接口拿数据，然后把数据整理成Chart.js需要的格式（labels和datasets），再初始化图表。

示例（用Chart.js + jQuery/Web API） #

先引入必要的脚本：

<!-- 引入Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!-- 如果是Web Forms用jQuery做AJAX，Core也可以用fetch -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

加一个canvas容器：

<canvas id="salesChart" width="600" height="300"></canvas>

写JS逻辑获取数据并渲染：

Web Forms版本（用jQuery AJAX）：

$(document).ready(function() {
    $.ajax({
        type: "POST",
        url: "SalesChart.aspx/GetSalesData",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(res) {
            // 解析后端返回的JSON数据
            const data = JSON.parse(res.d);
            
            // 提取Chart.js需要的labels和数据
            const labels = data.map(item => item.ProductCategory);
            const salesValues = data.map(item => item.TotalSales);
            
            // 初始化图表
            const ctx = document.getElementById('salesChart').getContext('2d');
            new Chart(ctx, {
                type: 'bar', // 可以换成line、pie、doughnut等
                data: {
                    labels: labels,
                    datasets: [{
                        label: '季度销售额',
                        data: salesValues,
                        backgroundColor: 'rgba(54, 162, 235, 0.2)',
                        borderColor: 'rgba(54, 162, 235, 1)',
                        borderWidth: 1
                    }]
                },
                options: {
                    scales: {
                        y: {
                            beginAtZero: true, // Y轴从0开始
                            title: {
                                display: true,
                                text: '销售额（元）'
                            }
                        },
                        x: {
                            title: {
                                display: true,
                                text: '产品分类'
                            }
                        }
                    }
                }
            });
        },
        error: function(xhr, status, err) {
            console.log('获取数据失败：', err);
        }
    });
});

ASP.NET Core版本（用fetch API）：

document.addEventListener('DOMContentLoaded', async function() {
    try {
        // 调用API接口
        const res = await fetch('/api/chart/sales');
        const data = await res.json();
        
        const labels = data.map(item => item.ProductCategory);
        const salesValues = data.map(item => item.TotalSales);
        
        const ctx = document.getElementById('salesChart').getContext('2d');
        new Chart(ctx, {
            type: 'line',
            data: {
                labels: labels,
                datasets: [{
                    label: '季度销售额',
                    data: salesValues,
                    tension: 0.3,
                    backgroundColor: 'rgba(75, 192, 192, 0.2)',
                    borderColor: 'rgba(75, 192, 192, 1)',
                    fill: true
                }]
            },
            options: {
                responsive: true, // 自适应容器大小
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
    } catch (err) {
        console.log('加载数据出错：', err);
    }
});

一些注意事项 #

• 连接字符串配置：Web Forms在Web.config的<connectionStrings>节点配置，Core在appsettings.json里的ConnectionStrings配置。
• SQL注入防护：如果查询有动态条件，一定要用参数化查询（比如cmd.Parameters.AddWithValue("@Category", category)），不要直接拼接SQL字符串。
• NuGet包：Web Forms需要安装Newtonsoft.Json，Core如果用System.Text.Json的话，默认已经包含，但处理DataTable可能需要额外配置（不过直接返回DataTable大部分情况没问题）。
• 图表自定义：Chart.js支持超多自定义选项，比如颜色、图例、动画、工具提示等，你可以根据需求调整配置。

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