Plotly.Blazor: 打造Blazor交互图表

摘要：在开发中，数据可视化是不可缺少的一部分。不管是仪表盘、报表系统还是数据分析平台，图表展示都很重要。

在开发中，数据可视化是不可缺少的一部分。不管是仪表盘、报表系统还是数据分析平台，图表展示都很重要。

介绍一个专为 Blazor 开发打造的开源库 —— Plotly.Blazor。将广受欢迎的 JavaScript 图表库Plotly.js封装成 Razor 组件。可以不用写一行 JS，在 Blazor 项目中使用丰富的交互式图表。

Plotly.Blazor是一个将plotly.js包装为 Blazor 可用组件的开源项目。它的主要优点有

• 根据 Plotly 的官方配置结构生成 C# 类；

• 支持自动更新到最新版本的 plotly.js；

• 提供类型安全的 API，方便在 Blazor 中集成和操作图表；

• 兼容 Blazor Server 和 Blazor WebAssembly。

环境准备

• Visual Studio 2019（推荐 16.6+）或 VS Code；

• .NET 6 或更高版本（适用于 v2.0.0 及以上）；

• 已创建 Blazor 项目（Server / WebAssembly 都可以）；

安装方法

你可以通过 NuGet 安装：

或者使用 CLI：

注意：如果你使用的是 4.1.0 或更低版本，请手动引入 JS 文件到_Layout.cshtml在_Imports.razor文件中添加以下代码：1. 创建图表组件在.razor页面中加入下面的代码：2. 初始化图表数据@code {
PlotlyChart chart;
Config config =newConfig;
Layout layout =newLayout;

IList data =newList
{
newScatter
{
Name ="示例散点图"
Mode = ModeFlag.Lines | ModeFlag.Markers,
X =newListobject>{123},
Y =newListobject>{123}
}
};
}3. 动态更新数据（可选）privateasyncTaskAddData(intcount =100)
{
if(!(chart.Data.FirstOrDefaultisScatter scatter))return;
var(x, y) = Helper.GenerateData(scatter.X.Count +1, scatter.X.Count +1+ count);

awaitchart.ExtendTrace(x, y, data.IndexOf(scatter));
}