在Blazor中使用Chart.js生成图表

1. 在Blazor中使用Chart.js

1. 首先，从Chart.js官方网站下载Chart.js库文件。
   推荐下载这个构建好的版本https://cdnjs.com/libraries/Chart.js，最新版是v4.2.1

2. 在Blazor项目中把刚刚下载好的Chart.js放到wwwroot目录下。

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

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

4. 在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>
   

5. 在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);
       }
   

6. 接下来我们在组件所在目录下创建一个当前组件隔离的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);
       }
   

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

7. 运行Blazor应用程序，您应该能够看到您的Chart.js图表！

更多图表类型等信息，请参阅Chart.js官方文档。https://www.chartjs.com.cn/docs/

8. 上面的相关代码我放在GitHub了，有需要的可以查看：https://github.com/azlis/BlazorChartJS

原文链接：https://www.cnblogs.com/codecopier/p/17298282.html