引用ChartJs.Blazor中的插件

Question

我正在将一个应用程序从标准C#MVC应用程序转换为Blazor应用程序。MVC应用程序使用ChartJs来创建图表。我一直没能弄清楚的一件事是如何在ChartJs.Blazor中调用插件

Chart.pluginService.register({
beforeUpdate: function (chartInstance) {
chartInstance.data.datasets.forEach(function (dataset) {
if (dataset.label === "CPAP Usage") {
dataset.backgroundColor = dataset.data.map(function (data) {
return data < 4 ? '#7d1646' : '#40a37f';
})
}
})
}
});

Answer 1

答案是将JavaScript代码放在wwwroot/css目录中的JavaScript文件中。这将是该文件的内容：

export function MakePluginService() {
Chart.pluginService.register({
beforeUpdate: function (chartInstance) {
chartInstance.data.datasets.forEach(function (dataset) {
if (dataset.label === "CPAP Usage") {
dataset.backgroundColor = dataset.data.map(function (data) 
{
return data < 4 ? '#7d1646' : '#40a37f';
})
}
})
}
});
}

将其放入PlugInService.js等文件中。在@code部分之前添加以下行：

@inject IJSRuntime JSRuntime
@implements IAsyncDisposable

然后，在@code部分中，添加以下行：

private IJSObjectReference? module;
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
module = await JSRuntime.InvokeAsync<IJSObjectReference>("import", 
"./PlugInService.js");
if (module is not null)
{
await module.InvokeVoidAsync("MakePluginService");
}
}
}
async ValueTask IAsyncDisposable.DisposeAsync()
{
if (module is not null)
{
await module.DisposeAsync();
}
}

JavaScript文件将在HTML内容呈现后执行。在MakePluginService中，ChartJs服务将在Blazor.ChartJs库中注册。