Blazor可通过JS互操作集成Chart.js：1.在HTML中引入CDN；2.用JS封装initBarChart/updateBarChart函数管理图表实例；3.在组件中用IJSRuntime调用并绑定canvas；4.注意OnAfterRenderAsync时机、内存清理及类型安全优化。
Blazor 本身不直接支持 Chart.js，但可以通过 JavaScript 互操作（JS Interop）在 Blazor WebAssembly 或 Blazor Server 中集成 Chart.js。核心思路是：用 HTML `canvas>` 元素占位，通过 JS 初始化图表，并由 C# 控制数据和更新逻辑。
1. 引入 Chart.js 脚本
在 `index.html`（WebAssembly）或 `_Host.cshtml`（Server）的 `
` 或页面底部添加 Chart.js CDN 链接：确保加载顺序：Chart.js 必须在自定义 JS 初始化代码之前加载。
2. 创建 JS 初始化与更新函数
在 `wwwroot/js/charts.js` 中添加封装函数，避免直接在 C# 中写大量 JS 字符串：
let charts = {};
window.initBarChart = (elementId, labels, data) => {
const ctx = document.getElementById(elementId).getContext('2d');
charts[elementId] = new Chart(ctx, {
type: 'bar',
data: { labels, datasets: [{ label: '数值', data }] },
options: { responsive: true }
});
};
window.updateBarChart = (elementId, labels, data) => {
if (charts[elementId]) {
charts[elementId].data.labels = labels;
charts[elementId].data.datasets[0].data = data;
charts[elementId].update();
}
};
这样可复用、易维护，也支持多图表实例（用 `elementId` 区分）。
3. 在 Blazor 组件中调用
使用 `IJSRuntime` 注入并调用 JS 函数。例如在 `Counter.razor` 中动态渲染柱状图：
先注入服务：
@inject IJSRuntime JSRuntime
再在 `@code` 块中初始化并更新：
@code {
private List labels = new() { "一月", "二月", "三月" };
private List values = new() { 12, 19, 3 };
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await JSRuntime.InvokeVoidAsync("initBarChart", "myChart", labels, values);
}
}
private async Task UpdateChart()
{
values = new() { values[0] + 1, values[1] + 2, values[2] + 3 };
await JSRuntime.InvokeVoidAsync("updateBarChart", "myChart", labels, values);
}
}
对应 HTML 部分只需一个 canvas 标签：
4. 注意事项与优化建议
- 生命周期匹配：`OnAfterRenderAsync` 是安全调用 JS 的时机，尤其首次渲染后 canvas 才真实存在
- 内存管理：页面销毁时建议调用 `Chart.destroy()`，可在组件 `Dispose` 中清理（需额外 JS 封装）
- 类型安全：可用 `IJSInProcessRuntime`（WASM）提升性能；Server 模式下注意 SignalR 延迟影响实时性
- 替代方案：如需更强 .NET 集成，可考虑 ChartJs.Blazor（已归档但仍可用）或 类似轻量封装库
基本上就这些。不需要第三方 NuGet 包，纯 JS 互操作即可稳定运行，适合大多数业务图表需求。
