如何使用 db info Blazor 加载图表？

Question

我刚刚开始使用 blazor 创建一个 Web 应用程序，并且想知道如何将我保存到不同列表中的信息连接起来以与 ChartJS 一起使用。我不确定如何将两者联系起来，想知道是否有人可以帮助/解释。

这是我的 stats.razor 页面，我将数据库信息保存到不同的列表中：

@code {
    private List<string> employeeNames = new List<string>();
    private List<int> employeeStats = new List<int>();
    private List<Employee> 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 将它们打印在图表上。这是我的 wwwroot js 文件：

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 中，但它不会将图表加载到页面上。

<!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" />
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script>
    **<script src="stats.js"></script>** //<-here
    <link rel="stylesheet" href="SoulConnect.styles.css" />
    <link rel="icon" type="image/png" href="favicon.png" />
    <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
    <HeadOutlet />
</head>

<body>
    <Routes />
    <script src="_framework/blazor.web.js"></script>
</body>

</html>

Answer 1

我已将 js 文件包含在我的 app.razor 中，但它没有加载图表到页面上。

问题涉及您何时/何地调用

GenerateChart()

方法来绑定图表数据。在

OnInitialized

阶段，组件的 UI 尚未完全渲染，因此在该方法中，任何操作 DOM 的 JavaScript 都将失败或不起作用。

要解决这个问题，您可以在

GenerateChart()

方法中调用

OnAfterRenderAsync

方法，如下所示：

protected override async Task OnInitializedAsync()
{ 
    //test data
    employees = new List<Employee>()
    {
        new Employee(){Name="A", Id=6},
        new Employee(){Name="B", Id=8},
        new Employee(){Name="C", Id=8},
        new Employee(){Name="D", Id=5},
        new Employee(){Name="E", Id=3},
        new Employee(){Name="F", Id=7},
    }; 
    employeeNames = employees.Select(e => e.Name).ToList();
    employeeStats = employees.Select(e => e.Id).ToList();
    //await InvokeAsync(() => GenerateChart());

} 
protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        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", "myChart", "bar", chartData.labels, chartData.datasets[0].data, chartData.datasets[0].backgroundColor);
}

结果如下：

如何使用 db info Blazor 加载图表？

问题描述投票：0回答：1

1个回答

最新问题

如何使用 db info Blazor 加载图表？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1