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

介绍一个专为 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

万普插件库

jQuery插件大全与特效教程

Plotly.Blazor: 打造Blazor交互图表