在Blazor中使用Chart.js-Toy模板网

这篇具有很好参考价值的文章主要介绍了在Blazor中使用Chart.js。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1. 在Blazor中使用Chart.js

首先，从Chart.js官方网站下载Chart.js库文件。
推荐下载这个构建好的版本https://cdnjs.com/libraries/Chart.js，最新版是v4.2.1
在Blazor项目中把刚刚下载好的Chart.js放到wwwroot目录下。

在Blazor项目中的Pages文件夹下_Host.cshtml文件中添加以下代码：

<script src="_framework/blazor.webassembly.js"></script>
<-- 添加下面这句 -->
<script src="~/Chart.js"></script>

在Blazor组件中使用Chart.js，需要在组件中添加以下代码：
注意！这个canvas标签的id非常重要！后面调用js的时候要用到它！
在组件顶部添加一行代码，注入JSRuntime

 @page "/"
 @inject IJSRuntime JS

 <PageTitle>BlazorWithChartJS</PageTitle>
 <p>
     <h2>
         在Blazor中使用 
         <code><strong>JavaScript</strong></code>
         调用
         <code><strong>Chart.JS</strong></code>
         绘制曲线图
     </h2>
 </p>
   
 <div class="chart">
     <canvas id="AnimationsChart"></canvas>
 </div>

在Index组件的@code代码块中，添加以下C#代码：

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            var jsmodule = $"./Pages/Index.razor.js";
            var jSObject = await JS.InvokeAsync<IJSObjectReference>("import", jsmodule);
            await jSObject.InvokeVoidAsync("animationsChart");
        }
        await base.OnAfterRenderAsync(firstRender);
    }

接下来我们在组件所在目录下创建一个当前组件隔离的js文件Index.razor.js，在组件的代码块中，添加以下JavaScript代码：

export function animationsChart() {
        const ctx = document.getElementById('AnimationsChart');

        const data = {
            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
            datasets: [{
                label: 'Looping tension',
                data: [65, 59, 80, 81, 26, 55, 40],
                fill: false,
                borderColor: 'rgb(75, 192, 192)',
            }]
        };

        const config = {
            type: 'line',
            data: data,
            options: {
                animations: {
                    tension: {
                        duration: 1000,
                        easing: 'linear',
                        from: 1,
                        to: 0,
                        loop: true
                    }
                },
                scales: {
                    y: {
                        min: 0,
                        max: 100
                    }
                }
            }
        };

        new Chart(ctx, config);
    }

这将创建一个简单的折线图，您可以根据需要更改类型、数据和选项。