网站首页 > 技术文章正文

Plotly.Blazor: 打造Blazor交互图表

yimeika 2025-06-20 22:16:03 技术文章 2 ℃

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

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

什么是 Plotly.Blazor？

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

o 根据 Plotly 的官方配置结构生成 C# 类；
o 支持自动更新到最新版本的 plotly.js；
o 提供类型安全的 API，方便在 Blazor 中集成和操作图表；
o 兼容 Blazor Server 和 Blazor WebAssembly。

使用

环境准备

o Visual Studio 2019（推荐 16.6+）或 VS Code；
o .NET 6 或更高版本（适用于 v2.0.0 及以上）；
o 已创建 Blazor 项目（Server / WebAssembly 都可以）；

安装方法

你可以通过 NuGet 安装：

Install-Package Plotly.Blazor

或者使用 CLI：

dotnet add package Plotly.Blazor

注意：如果你使用的是 4.1.0 或更低版本，请手动引入 JS 文件到 _Layout.cshtml。

引入命名空间

在 _Imports.razor 文件中添加以下代码：

@using Plotly.Blazor
@using Plotly.Blazor.Traces

如何使用？

1. 创建图表组件

在 .razor 页面中加入下面的代码：

<PlotlyChart @bind-Config="config" @bind-Layout="layout" @bind-Data="data" @ref="chart"/>

2. 初始化图表数据

@code {
 PlotlyChart chart;
 Config config = new Config();
 Layout layout = new Layout();
 
 IList<ITrace> data = new List<ITrace>
 {
 new Scatter
 {
 Name = "示例散点图",
 Mode = ModeFlag.Lines | ModeFlag.Markers,
 X = new List<object>{1,2,3},
 Y = new List<object>{1,2,3}
 }
 };
}

3. 动态更新数据（可选）

private async Task AddData(int count = 100)
{
 if (!(chart.Data.FirstOrDefault() is Scatter scatter)) return;
 var (x, y) = Helper.GenerateData(scatter.X.Count + 1, scatter.X.Count + 1 + count);

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

示例预览

在线演示地址 : https://laytec-ag.github.io/Plotly.Blazor

项目地址

GitHub 地址：https://github.com/LayTec-AG/Plotly.Blazor

网站首页 > 技术文章 正文