这是 ApexChart Razor 页面，未显示任何图表，显示空白页面。我想在 MudBlazor .Net6 上实现 ApexChart
@page "/apexChart"
@using MudBlazor
@using MudBlazor.Charts
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<div id="chart"></div>
<script>
var options = {
chart: {
type: 'line'
},
series: [{
name: 'sales',
data: [30, 40, 35, 50, 49, 60, 70, 91, 125]
}],
xaxis: {
categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999]
}
}
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
</script>
@code {
}
我希望在 Mudblazor 中显示顶点图表，因为它以 html 代码显示。下面的代码是顶点图的html代码
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<div id="chart"></div>
<script>
var options = {
chart: {
type: 'line'
},
series: [{
name: 'sales',
data: [30,40,35,50,49,60,70,91,125]
}],
xaxis: {
categories: [1991,1992,1993,1994,1995,1996,1997, 1998,1999]
}
}
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
</script>
</body>
</html>
您不能直接在 Razor 组件中使用 HTML 脚本标签。 确保您的
_Host.cshtmlindex.html@page "/apexChart"
@using MudBlazor
@using MudBlazor.Charts
<MudContainer>
<div id="chart"></div>
</MudContainer>
@code {
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await JSRuntime.InvokeVoidAsync("renderChart");
}
}
}
在项目的 wwwroot 目录中创建一个 JavaScript 文件并将其命名为
chartInterop.jswindow.renderChart = () => {
var options = {
chart: {
type: 'line'
},
series: [{
name: 'sales',
data: [30, 40, 35, 50, 49, 60, 70, 91, 125]
}],
xaxis: {
categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999]
}
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
};
您必须已将 JavaScript 文件包含在您的
_Host.cshtmlindex.html<script src="chartInterop.js"></script>