Как загрузить диаграмму с помощью информации о базе данных Blazor? ⇐ C#

[Anonymous]

Я недавно начал использовать blazor для создания веб-приложения и задавался вопросом, как мне объединить информацию, которую я сохранил, в разные списки для работы с ChartJS. Я не уверен, как соединить эти два понятия, и мне было интересно, может ли кто-нибудь помочь/объяснить.
Это моя страница stats.razor, где я сохраняю информацию о базе данных. разные списки:
@code {
private List employeeNames = new List();
private List employeeStats = new List();
private List employees = new();

protected override async Task OnInitializedAsync()
{
employees = await EmployeeService.GetEmployeesAsync();

if (employees.Any())
{
employeeNames = employees.Select(e => e.Name).ToList();
employeeStats = employees.Select(e => e.Id).ToList();
}

await InvokeAsync(() => GenerateChart());
}

private void GenerateChart()
{
var chartData = new
{
labels = employeeNames,
datasets = new[]
{
new
{
label = "Employee Performance",
data = employeeStats,
backgroundColor = "rgba(75, 192, 192, 0.2)",
borderColor = "rgba(75, 192, 192, 1)",
borderWidth = 1
}
}
};
JS.InvokeVoidAsync("createChart", "myChart1", "bar", chartData.labels, chartData.datasets[0].data, chartData.datasets[0].backgroundColor);
}
}

И я хотел бы распечатать их на диаграмме с помощьюchartJS. Это мой js-файл wwwroot:
function createChart(canvasId, chartType, labels, data, backgroundColor) {
let ctx = document.getElementById(canvasId).getContext('2d');
return new Chart(ctx, {
type: chartType,
data: {
labels: labels,
datasets: [{
data: data,
backgroundColor: backgroundColor,
borderWidth: 1,
borderColor: '#000'
}]
},
options: {
responsive: true,
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
},
maintainAspectRatio: false,
legend: {
display: false
}
}
});
}

Я включил js-файл в свой app.razor, но он не загружает диаграмму на страницу.










**** //

Подробнее здесь: https://stackoverflow.com/questions/789 ... nfo-blazor