Plotly.Blazor 다운로드 Plotly.Blazor 소스 코드 다운로드

Plotly.Blazor

기타 카테고리

v5.4.0

다운로드

plotly.blazor

이 라이브러리는 잘 알려진 차트 라이브러리 Plotly.js를 Blazor 프로젝트에서 사용할 수있는 면도기 구성 요소로 포장합니다. 이 래퍼의 장점은 플롯 체계 자체가 클래스를 생성하는 데 사용된다는 것입니다. 따라서 생성기의 도움으로 최신 Plotly.js 버전으로 자동 업데이트 할 수 있습니다.

시작하기

전제 조건

Blazor Server 앱을 만들려면 ASP.NET 및 웹 개발 워크로드와 함께 최신 Visual Studio 2019를 설치하십시오. Blazor WebAssembly의 경우 적어도 Visual Studio 2019 16.6+가 필요합니다. 또 다른 대안은 Visual Studio 코드를 사용하는 것입니다. 자세한 내용은 여기를 클릭하십시오.

plotly.ber 버전> = 2.0.0의 Blazor는 .NET 6 이상이 필요합니다.

설치

Blazor 프로젝트를 만든 후에는 다음 단계를 수행해야합니다.

최신 Nuget 패키지를 설치하십시오

패키지 관리자 사용

 Install-Package Plotly.Blazor

.NET CLI 사용

dotnet add package Plotly.Blazor

4.1.0 이하를 사용하는 경우 다음 줄을 _/framework/blazor.webassembly.js 또는 _/framework/blazor.server.js 위의 _layout.cshtml에 추가하십시오.

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