Plotly.Blazor Download - Plotly.Blazor Download de código fonte

Plotly.Blazor

Outras categorias

v5.4.0

Baixar

Plotly.blazor

Esta biblioteca empacota a conhecida biblioteca de gráficos plotly.js em um componente Razor que pode ser usado em um projeto Blazor. A vantagem desse invólucro é que o próprio esquema da plotagem é usado para gerar as classes. Assim, você pode atualizar automaticamente para a versão mais recente do plotly.js com a ajuda do gerador.

Começando

Pré -requisitos

Para criar aplicativos de servidor Blazor, instale a versão mais recente do Visual Studio 2019 com a carga de trabalho ASP.NET e Desenvolvimento da Web. Para o Blazor WebAssembly, você precisa de pelo menos o Visual Studio 2019 16.6+. Outra alternativa seria usar o código do Visual Studio. Clique aqui para obter mais informações.

Plotly.blazor com versão> = 2.0.0 Requer .Net 6 ou superior.

Instalação

Depois de criar seu projeto Blazor, você precisa executar as seguintes etapas:

Instale o último pacote Nuget

Usando o gerenciador de pacotes

 Install-Package Plotly.Blazor

Usando .NET CLI

dotnet add package Plotly.Blazor

Se você estiver usando 4.1.0 ou inferior , adicione as seguintes linhas ao seu _layout.cshtml acima do _/framework/blazor.webassembly.js ou _/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 >

Adicione as seguintes linhas ao seu _imports.razor

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

Agora estamos prontos para ir! ?

Uso

Crie o componente Razor

Informações: A referência do gráfico é importante para que possamos atualizar o gráfico posteriormente.

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

Gerar alguns dados iniciais para o seu gráfico.

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

Gerar alguns dados adicionais para o seu gráfico.

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