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 ) ) ;
}