Descargar Plotly.Blazor - Plotly.Blazor código fuente de descarga

Plotly.Blazor

Otras categorias

v5.4.0

Descargar

Tramly.blazor

Esta biblioteca empaqueta la conocida biblioteca de gráficos Plotly.js en un componente de afeitar que se puede usar en un proyecto Blazor. La ventaja de este envoltorio es que el esquema complementario en sí se usa para generar las clases. Por lo tanto, puede actualizar automáticamente la última versión de Plotly.js con la ayuda del generador.

Empezando

Requisitos previos

Para crear aplicaciones de servidor Blazor, instale la última versión de Visual Studio 2019 con la carga de trabajo ASP.NET y el desarrollo web. Para Blazor WebAssembly necesita al menos Visual Studio 2019 16.6+. Otra alternativa sería usar el código Visual Studio. Haga clic aquí para obtener más información.

Plotly.Blazor con versión> = 2.0.0 requiere .NET 6 o superior.

Instalación

Después de haber creado su proyecto Blazor, debe hacer los siguientes pasos:

Instale el último paquete Nuget

Usando el administrador de paquetes

 Install-Package Plotly.Blazor

Usando .NET CLI

dotnet add package Plotly.Blazor

Si está utilizando 4.1.0 o inferior , agregue las siguientes líneas a su _layout.cshtml sobre _/framework/blazor.webassembly.js o _/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 >

Agregue las siguientes líneas a sus _imports.Razor

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

¡Ahora estamos listos para ir! ?

Uso

Crea el componente de afeitar

Información: La referencia del gráfico es importante para que podamos actualizar el gráfico más adelante.

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

Genere algunos datos iniciales para su 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 }
        }
    };
}

Genere algunos datos adicionales para su 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 ) ) ;
}