Plotly.BlazorダウンロードPlotly.Blazorソースコードのダウンロード

Plotly.Blazor

その他のカテゴリー

v5.4.0

ダウンロード

plotly.blazor

このライブラリは、有名なチャート作成ライブラリPlotly.jsを、Blazorプロジェクトで使用できるカミソリコンポーネントにパッケージ化します。このラッパーの利点は、プロットリースキーム自体がクラスを生成するために使用されることです。したがって、ジェネレーターの助けを借りて、最新のplotly.jsバージョンに自動的に更新できます。

はじめる

前提条件

Blazorサーバーアプリを作成するには、ASP.NETおよびWeb開発ワークロードを使用して、Visual Studio 2019の最新バージョンをインストールします。 Blazor WebAssemblyには、少なくともVisual Studio 2019 16.6+が必要です。別の選択肢は、Visual Studioコードを使用することです。詳細については、ここをクリックしてください。

plotly.blazor withバージョン> = 2.0.0では、.net 6以降が必要です。

インストール

Blazorプロジェクトを作成したら、次の手順を実行する必要があります。

最新のNugetパッケージをインストールします

パッケージマネージャーを使用します

 Install-Package Plotly.Blazor

.NET CLIを使用します

dotnet add package Plotly.Blazor

4.1.0以降を使用している場合は、_layout.cshtmlに次の行を_/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 ) ) ;
}