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 已就绪）：
jquery带商品分类侧边栏列表的商城导航菜单
下载
这是一款使用jquery制作的带商品分类侧边栏列表的商城导航菜单。该商城菜单兼容ie8浏览器。用户可以通过点击左侧的下拉菜单来查看各种商品的列表，非常实用和方便。 使用方法 在页面中引入样式文件style.css和jquery.min.js文件。
- 定义 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 就够用，轻量且可控。
