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