在Blazor中使用Chart.js已关闭评论
391 次浏览

A+

所属分类：.NET技术

摘要

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

1. 在Blazor中使用Chart.js

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

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

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