BlazorChartJS

影子的影子

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文件中添加以下代码：
  1. [/code]
  2. [*]在Blazor组件中使用Chart.js，需要在组件中添加以下代码：
  3. 注意！这个canvas标签的id非常重要！后面调用js的时候要用到它！
  4. 在组件顶部添加一行代码，注入JSRuntime
  5. [code] @page "/"
  6. @inject IJSRuntime JS
  8. <PageTitle>BlazorWithChartJS</PageTitle>
  9. <p>
  10.      <h2>
  11.          在Blazor中使用
  12.          <strong>JavaScript</strong>
  13.          调用
  14.          <strong>Chart.JS</strong>
  15.          绘制曲线图
  16.      </h2>
  17. </p>
  18.    
  20.      <canvas id="AnimationsChart"></canvas>

  复制代码
• 在Index组件的@code代码块中，添加以下C#代码：
  1.     protected override async Task OnAfterRenderAsync(bool firstRender)
  2.     {
  3.         if (firstRender)
  4.         {
  5.             var jsmodule = $"./Pages/Index.razor.js";
  6.             var jSObject = await JS.InvokeAsync<IJSObjectReference>("import", jsmodule);
  7.             await jSObject.InvokeVoidAsync("animationsChart");
  8.         }
  9.         await base.OnAfterRenderAsync(firstRender);
  10.     }

  复制代码
• 接下来我们在组件所在目录下创建一个当前组件隔离的js文件Index.razor.js，在组件的代码块中，添加以下JavaScript代码：
  1. export function animationsChart() {
  2.         const ctx = document.getElementById('AnimationsChart');
  4.         const data = {
  5.             labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
  6.             datasets: [{
  7.                 label: 'Looping tension',
  8.                 data: [65, 59, 80, 81, 26, 55, 40],
  9.                 fill: false,
  10.                 borderColor: 'rgb(75, 192, 192)',
  11.             }]
  12.         };
  14.         const config = {
  15.             type: 'line',
  16.             data: data,
  17.             options: {
  18.                 animations: {
  19.                     tension: {
  20.                         duration: 1000,
  21.                         easing: 'linear',
  22.                         from: 1,
  23.                         to: 0,
  24.                         loop: true
  25.                     }
  26.                 },
  27.                 scales: {
  28.                     y: {
  29.                         min: 0,
  30.                         max: 100
  31.                     }
  32.                 }
  33.             }
  34.         };
  36.         new Chart(ctx, config);
  37.     }

  复制代码
  这将创建一个简单的折线图，您可以根据需要更改类型、数据和选项。
  
• 运行Blazor应用程序，您应该能够看到您的Chart.js图表！
  

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

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

来源:https://www.cnblogs.com/LambertLee/archive/2023/04/08/17298282.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！