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文件中添加以下代码：
[*]在Blazor组件中使用Chart.js，需要在组件中添加以下代码：
注意！这个canvas标签的id非常重要！后面调用js的时候要用到它！
在组件顶部添加一行代码，注入JSRuntime
@page "/"
@inject IJSRuntime JS
<PageTitle>BlazorWithChartJS</PageTitle>
<p>
<h2>
在Blazor中使用
<strong>JavaScript</strong>
调用
<strong>Chart.JS</strong>
绘制曲线图
</h2>
</p>
<canvas id="AnimationsChart"></canvas>
[*]在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: ,
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);
}这将创建一个简单的折线图，您可以根据需要更改类型、数据和选项。
[*]运行Blazor应用程序，您应该能够看到您的Chart.js图表！
https://img2023.cnblogs.com/blog/2902819/202304/2902819-20230408115858858-807817032.png
更多图表类型等信息，请参阅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】 我们会及时删除侵权内容，谢谢合作！
页:
[1]