我想将标准 Google Chart (https://developers.google.com/chart/interactive/docs/quick_start) 实施到标准 Blazor 应用程序的 Razor 页面中（例如到页面 FetchData.razor 中）。
我必须在哪个文件中实现脚本部分？
如何从 Razor 页面调用脚本？
如何向脚本发送数据？
_layout.cshtml
<body>
...
<script src="pages/Index.razor.js"></script>
...
</body>
Pages/Index.razor.js
window.onload = function () {
google.charts.load('current', { 'packages': ['line'] });
}
function drawChart(json) {
var dataTable = new google.visualization.DataTable(json);
var options = {
width: 600,
height: 400,
...
}
};
var chart = new google.charts.Line(document.getElementById('chart_div'));
chart.draw(dataTable, google.charts.Line.convertOptions(options));
}
Pages/Index.razor
@inject IJSRuntime JSRuntime
...
<div id="chart_div"></div>
...
Pages/Index.razor.cs
Google.DataTable.Net.Wrapperusing Microsoft.JSInterop;
...
protected override async Task OnAfterRenderAsync(bool firstRender)
{
string dataTable = GetDataTable().GetJson();
await JSRuntime.InvokeVoidAsync("drawChart", dataTable);
}
在这种情况下
OnAfterRenderAsync