Blazor 使用 Chart.js 绘制图表的方法

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）的 或 前添加：

• cdn 方式（推荐快速验证）：
  
• 或下载 chart.js 文件放入 wwwroot/js/，再引用本地路径

定义 canvas 元素并设置唯一 ID

在 Blazor 组件（如 Index.razor）中添加 canvas 标签，必须指定 id，Chart.js 需要它来定位绘图区域：

• ID 值需全局唯一，避免多个图表冲突
• 可配合 css 控制响应式尺寸，但建议保留 width/height 属性作为初始画布分辨率

通过 JS Interop 创建图表

在组件中声明 JS 模块引用，并在 OnAfterRenderAsync 或 OnInitializedAsync 中调用初始化逻辑（推荐 OnAfterRenderAsync 确保 dom 已就绪）：

• 定义 JS 函数（如在 wwwroot/js/charts.js）：
  

  window.createBarChart = (elementId, labels, data) => {
    new Chart(document.getElementById(elementId), {
      type: 'bar',
      data: { labels, datasets: [{ data }] }
    });
  };

• Blazor 组件中调用：
  

  @inject IJSRuntime JSRuntime
  @code {
    private bool chartRendered;
    protected override async Task OnAfterRenderAsync(bool firstRender) {
      if (!chartRendered) {
        await JSRuntime.InvokeVoidAsync("createBarChart", "myChart",
          new[] { "Jan", "Feb", "Mar" }, new[] { 12, 19, 3 });
        chartRendered = true;
      }
    }
  }

更新图表数据（非重新渲染）

若需动态更新，不要重复调用构造函数（会报错“Canvas is already in use”），而应复用已有实例：

• 在 JS 中保存 chart 实例并提供更新方法：
  

  window.charts = {};
  window.initChart = (id, config) => {
    charts[id] = new Chart(...);
  }
  window.updateChart = (id, newData) => {
    const chart = charts[id];
    if (chart) { chart.data.datasets[0].data = newData; chart.update(); }
  }

• Blazor 中调用 JSRuntime.InvokeVoidAsync("updateChart", "myChart", newData)

基本上就这些。关键点在于：确保 canvas 存在、JS 初始化时机正确、复用实例而非重复创建。不需要第三方 NuGet 包，原生 JS Interop 就够用，轻量且可控。