在Blazor中使用Chart.js

li發表於2023-04-08
BlazorJS

1. 在Blazor中使用Chart.js

  1. 首先，從Chart.js官方網站下載Chart.js庫檔案。
    推薦下載這個構建好的版本https://cdnjs.com/libraries/Chart.js，最新版是v4.2.1

  2. 在Blazor專案中把剛剛下載好的Chart.js放到wwwroot目錄下。

  3. 將下載的Chart.js檔案複製到該資料夾中。

  4. 在Blazor專案中的Pages資料夾下_Host.cshtml檔案中新增以下程式碼：

    <script src="_framework/blazor.webassembly.js"></script>
<-- 新增下面這句 -->
<script src="~/Chart.js"></script>

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

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

  7. 接下來我們在元件所在目錄下建立一個當前元件隔離的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);
    }

    這將建立一個簡單的折線圖，您可以根據需要更改型別、資料和選項。

  8. 執行Blazor應用程式，您應該能夠看到您的Chart.js圖表！

blazorChartJSRunPng

更多圖表型別等資訊，請參閱Chart.js官方文件。

上面的相關程式碼我放在GitHub了，有需要的可以檢視：https://github.com/azlis/BlazorChartJS

相關文章