如何在Blazor中通过数据库数据加载ChartJS图表？

我刚开始用Blazor开发Web应用，想把存在不同List里的数据库数据和ChartJS结合生成图表，但不知道怎么对接，求帮助和讲解。我已经写了部分代码，但图表始终加载不出来，相关代码如下：

1. stats.razor 数据获取代码 #

@code {
    private List<string> employeeNames = new List<string>();
    private List<int> employeeStats = new List<int>();
    private List<Employee> employees = new();

    protected override async Task OnInitializedAsync()
    {
        employees = await EmployeeService.GetEmployeesAsync();

        if (employees.Any())
        {
            employeeNames = employees.Select(e => e.Name).ToList();
            employeeStats = employees.Select(e => e.Id).ToList();
        }

        await InvokeAsync(() => GenerateChart());
    }

    private void GenerateChart()
    {
        var chartData = new
        {
            labels = employeeNames,
            datasets = new[]
            {
                new
                {
                    label = "Employee Performance",
                    data = employeeStats,
                    backgroundColor = "rgba(75, 192, 192, 0.2)",
                    borderColor = "rgba(75, 192, 192, 1)",
                    borderWidth = 1
                }
            }
        };
        JS.InvokeVoidAsync("createChart", "myChart1", "bar", chartData.labels, chartData.datasets[0].data, chartData.datasets[0].backgroundColor);
    }
}

2. wwwroot/stats.js ChartJS初始化代码 #

function createChart(canvasId, chartType, labels, data, backgroundColor) {
    let ctx = document.getElementById(canvasId).getContext('2d');
    return new Chart(ctx, {
        type: chartType,
        data: {
            labels: labels,
            datasets: [{
                data: data,
                backgroundColor: backgroundColor,
                borderWidth: 1,
                borderColor: '#000'
            }]
        },
        options: {
            responsive: true,
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            },
            maintainAspectRatio: false,
            legend: {
                display: false
            }
        }
    });
}

3. app.razor 资源引入代码 #

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
    <link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
    <link rel="stylesheet" href="app.css" />
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.4/dist/chart.umd.min.js"></script>
    <script src="stats.js"></script>
    <link rel="stylesheet" href="SoulConnect.styles.css" />
    <link rel="icon" type="image/png" href="favicon.png" />
    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
    <HeadOutlet />
</head>

<body>
    <Routes />
    <script src="_framework/blazor.web.js"></script>
</body>

</html>

问题排查与解决方案 #

1. 补全Canvas元素（最核心缺失项） #

你的stats.razor页面没有添加ChartJS必须的<canvas>渲染容器，JS找不到目标元素自然生成不了图表。在stats.razor的渲染区域添加：

<h3>员工绩效图表</h3>
<canvas id="myChart1" style="height: 400px; width: 100%;"></canvas>

2. 调整Blazor生命周期时机 #

OnInitializedAsync执行时，Blazor还未完成DOM渲染，此时调用JS获取DOM元素会返回null。改成在OnAfterRenderAsync中执行，且仅在首次渲染时触发：

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        employees = await EmployeeService.GetEmployeesAsync();

        if (employees.Any())
        {
            employeeNames = employees.Select(e => e.Name).ToList();
            employeeStats = employees.Select(e => e.Id).ToList();
        }

        GenerateChart();
        await InvokeAsync(StateHasChanged);
    }
}

3. 适配ChartJS v4版本配置 #

你使用的ChartJS 4.4.4版本废弃了旧的yAxes数组写法，同时legend配置需要移到plugins下，修改stats.js的options部分：

options: {
    responsive: true,
    scales: {
        y: { // 替换原yAxes数组
            beginAtZero: true
        }
    },
    maintainAspectRatio: false,
    plugins: { // legend移至plugins内
        legend: {
            display: false
        }
    }
}

4. 优化JS文件加载顺序 #

将stats.js的引入移到</body>标签前，确保DOM加载完成后再加载JS，避免函数未定义的问题：

<body>
    <Routes />
    <script src="_framework/blazor.web.js"></script>
    <script src="stats.js"></script> <!-- 调整到此处 -->
</body>

5. 快速排查技巧 #

打开浏览器F12控制台查看报错：

• 若提示document.getElementById(...) is null：检查Canvas的id是否与JS调用一致，以及是否在DOM渲染后执行JS
• 若提示Chart is not defined：检查ChartJS的CDN链接是否有效，且加载顺序在stats.js之前

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