我在 .Net 8 中有空白的 Blazor 项目，我正在尝试通过 nuget apexcharts / Blazor-ApexCharts 使用 ApexCharts。
我已经在页面中使用了演示代码。没有错误，但当我打开页面时，图表没有显示。
我正在 .net 8 中运行从 Visual Studio 中的模板创建的 Blazor 应用程序 到目前为止我已经下载了最新版本3.3.0的nuget
添加了_Imports.razor
@using ApexChartsApp.razor 添加了 InteractiveWebAssembly
<!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>
我的页面来自github
@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; }
}
}
有关如何调试此问题、做什么的任何提示都会很棒。 谢谢
缺失的部分就在页面顶部。
@rendermode InteractiveServer