Blazor中使用Chart.js需通过JS Interop调用其API，核心步骤包括：引入Chart.js脚本、定义带唯一ID的canvas元素、在OnAfterRenderAsync中初始化图表实例，并复用实例更新数据以避免重复创建错误。
Blazor 中使用 Chart.js 绘制图表，核心是通过 JavaScript 互操作（JS Interop）调用 Chart.js 的 API。由于 Chart.js 是纯前端库，不原生支持 Blazor 的组件模型，因此需手动初始化 canvas 元素、注入脚本，并在合适时机（如组件渲染后）创建图表实例。
引入 Chart.js 脚本
在 wwwroot/index.html（WebAssembly）或 wwwroot/_Host.cshtml（Server）的 <head> 或 </body> 前添加：
- CDN 方式（推荐快速验证）：
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> - 或下载 chart.js 文件放入 wwwroot/js/，再引用本地路径
定义 canvas 元素并设置唯一 ID
在 Blazor 组件（如 Index.razor）中添加 canvas 标签，必须指定 id，Chart.js 需要它来定位绘图区域：
<canvas id="myChart" width="400" height="200"></canvas>
- ID 值需全局唯一，避免多个图表冲突
- 可配合 CSS 控制响应式尺寸，但建议保留
width/height属性作为初始画布分辨率
通过 JS Interop 创建图表
在组件中声明 JS 模块引用，并在 OnAfterRenderAsync 或 OnInitializedAsync 中调用初始化逻辑（推荐 OnAfterRenderAsync 确保 DOM 已就绪）：
- 定义 JS 函数（如在 wwwroot/js/charts.js）：
window.createBarChart = (elementId, labels, data) => {<br> new Chart(document.getElementById(elementId), {<br> type: 'bar',<br> data: { labels, datasets: [{ data }] }<br> });<br>}; - Blazor 组件中调用：
@inject IJSRuntime JSRuntime<br>@code {<br> private bool chartRendered;<br> protected override async Task OnAfterRenderAsync(bool firstRender) {<br> if (!chartRendered) {<br> await JSRuntime.InvokeVoidAsync("createBarChart", "myChart",<br> new[] { "Jan", "Feb", "Mar" }, new[] { 12, 19, 3 });<br> chartRendered = true;<br> }<br> }<br>}
更新图表数据（非重新渲染）
若需动态更新，不要重复调用构造函数（会报错“Canvas is already in use”），而应复用已有实例：
- 在 JS 中保存 chart 实例并提供更新方法：
window.charts = {};<br>window.initChart = (id, config) => {<br> charts[id] = new Chart(...);<br>}<br>window.updateChart = (id, newData) => {<br> const chart = charts[id];<br> if (chart) { chart.data.datasets[0].data = newData; chart.update(); }<br>} - Blazor 中调用
JSRuntime.InvokeVoidAsync("updateChart", "myChart", newData)
基本上就这些。关键点在于：确保 canvas 存在、JS 初始化时机正确、复用实例而非重复创建。不需要第三方 NuGet 包，原生 JS Interop 就够用，轻量且可控。
