Blazor 中使用 Chart.js 绘制图表，核心是通过 JavaScript 互操作（JS Interop）调用 Chart.js 的 API。由于 Chart.js 是纯前端库，不原生支持 Blazor 的组件模型，因此需手动初始化 canvas 元素、注入脚本，并在合适时机（如组件渲染后）创建图表实例。
引入 Chart.js 脚本
在 wwwroot/index.html（WebAssembly）或 wwwroot/_Host.cshtml（Server）的
或 前添加： 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 就够用，轻量且可控。
