Plotly.Blazor download Plotly.Blazor源代码下载

Plotly.Blazor

其他类别

v5.4.0

下载

plotly.blazor

该库将众所周知的图表库绘制。JS中的剃须刀组件可用于大餐项目中。该包装纸的优点是绘图方案本身用于生成类。因此，您可以在生成器的帮助下自动更新到最新的plotly.js版本。

入门

先决条件

要创建Blazor Server应用程序，请使用ASP.NET和Web开发工作负载安装最新版本的Visual Studio 2019。对于Blazor WebAssembly，您至少需要Visual Studio 2019 16.6+。另一种选择是使用Visual Studio代码。单击此处以获取更多信息。

plotly.blazor具有版本> = 2.0.0要求.NET 6或更高。

安装

创建大发项目后，您需要执行以下步骤：

安装最新的Nuget软件包

使用软件包管理器

 Install-Package Plotly.Blazor

使用.NET CLI

dotnet add package Plotly.Blazor

如果您使用的是4.1.0或更低，请在_/framework/blazor.webassembly.js或_/framework/blazor.server.js上方添加以下行。

< script src = " _content/Plotly.Blazor/plotly-latest.min.js " type = " text/javascript " ></ script >
< script src = " _content/Plotly.Blazor/plotly-interop.js " type = " text/javascript " ></ script >

将以下行添加到您的_imports.razor

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

现在我们准备好了！？

用法

创建剃须刀组件

信息：图表参考很重要，因此我们稍后可以更新图表。

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

为您的情节生成一些初始数据。

 @code {
    PlotlyChart chart ;
    Config config = new Config ();
    Layout layout = new Layout ();
    // Using of the interface IList is important for the event callback!
    IList < ITrace > data = new List < ITrace >
    {
        new Scatter
        {
            Name = " ScatterTrace " ,
            Mode = ModeFlag . Lines | ModeFlag . Markers ,
            X = new List < object >{ 1 , 2 , 3 },
            Y = new List < object >{ 1 , 2 , 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 ) ) ;
}