.NET 8 Blazor项目中ApexCharts无法显示问题求助

问题背景 #

基于.NET 8的Blazor WebAssembly项目，集成Blazor-ApexCharts 3.3.0版本，页面代码无编译报错，但图表始终无法渲染显示。已完成的配置：

• 在_Imports.razor中添加@using ApexCharts
• App.razor设置为InteractiveWebAssembly全局渲染模式
• 页面代码与App.razor配置如下：

页面代码（/Apex） #

@page "/Apex"

<ApexChart TItem="MyData"
           Title="Sample Data">

    <ApexPointSeries TItem="MyData"
                     Items="Data"
                     Name="Net Profit"
                     SeriesType="SeriesType.Bar"
                     XValue="e => e.Category"
                     YValue="e=> e.NetProfit" />

    <ApexPointSeries TItem="MyData"
                     Items="Data"
                     Name="Revenue"
                     SeriesType="SeriesType.Bar"
                     XValue="e => e.Category"
                     YValue="e=> e.Revenue" />
</ApexChart>

@code {
    private List<MyData> Data { get; set; } = new();
    protected override void OnInitialized()
    {
        Data.Add(new MyData { Category = "Jan", NetProfit = 12, Revenue = 33 });
        Data.Add(new MyData { Category = "Feb", NetProfit = 43, Revenue = 42 });
        Data.Add(new MyData { Category = "Mar", NetProfit = 112, Revenue = 23 });
    }

    public class MyData
    {
        public string Category { get; set; }
        public int NetProfit { get; set; }
        public int Revenue { get; set; }
    }
}

App.razor配置 #

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
    <link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
    <link rel="stylesheet" href="app.css" />
    <link rel="stylesheet" href="DelirestLorawanWeb.styles.css" />
    <link rel="icon" type="image/png" href="favicon.png" />
    <HeadOutlet />
</head>

<body>
    <Routes />
    <app>
        <component type="typeof(App)" render-mode="InteractiveWebAssembly" />
    </app>
    <script src="_framework/blazor.web.js"></script>   
</body>

</html>

调试步骤与建议 #

• 检查ApexCharts JS资源引入
  Blazor-ApexCharts依赖原生ApexCharts.js库，.NET 8 Blazor WASM项目需手动引入相关脚本。在wwwroot/index.html的<body>末尾添加：

  <script src="_content/Blazor-ApexCharts/js/apex-charts.min.js"></script>
  <script src="_content/Blazor-ApexCharts/js/blazor-apex-charts.js"></script>
  

  确认项目构建后，_content/Blazor-ApexCharts目录下存在对应JS文件。

• 验证页面渲染模式
  确保/Apex页面启用InteractiveWebAssembly渲染，可在页面顶部添加：

  @rendermode InteractiveWebAssembly
  

  避免全局渲染模式未正确覆盖单个页面。

• 设置图表容器尺寸
  默认情况下ApexChart组件无明确宽高，可能导致无法渲染。给<ApexChart>添加样式指定尺寸：

  <ApexChart TItem="MyData"
             Title="Sample Data"
             Style="width: 100%; height: 400px;">
  

• 查看浏览器控制台隐藏错误
  按F12打开开发者工具，切换至Console标签，刷新页面检查是否存在JS层面错误（如Apex is not defined，表示JS库未加载成功）。

• 手动触发图表刷新
  在数据加载完成后强制刷新图表：

  <ApexChart @ref="chart" TItem="MyData" ...>
  

  修改@code块：

  private ApexChart<MyData> chart;
  
  protected override void OnInitialized()
  {
      Data.Add(new MyData { Category = "Jan", NetProfit = 12, Revenue = 33 });
      Data.Add(new MyData { Category = "Feb", NetProfit = 43, Revenue = 42 });
      Data.Add(new MyData { Category = "Mar", NetProfit = 112, Revenue = 23 });
      StateHasChanged();
      chart?.Refresh();
  }
  

• 重新安装NuGet包
  卸载并重新安装Blazor-ApexCharts包，确保包内所有资源（JS、CSS）正确复制到项目_content目录。

• 测试最简示例
  创建空白Blazor页面，仅保留最基础的ApexChart代码，排除其他页面元素或样式的干扰，验证图表是否能正常显示。

内容的提问来源于stack exchange，提问作者Martin Zazvorka