Blazor 怎么集成图表库 (Chart.js)

畫卷琴夢 2025-12-26 00:00:00 次阅读

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);
}
}