Plotly.Blazor Download - Plotly.Blazor Code source Téléchargement

Plotly.Blazor

Autres catégories

v5.4.0

Télécharger

Tracy.blazor

Cette bibliothèque emballe la bibliothèque de cartographie bien connue L'avantage de cet emballage est que le schéma de l'intrigue lui-même est utilisé pour générer les classes. Vous pouvez donc mettre à jour automatiquement la dernière version de Plotly.js à l'aide du générateur.

Commencer

Condition préalable

Pour créer des applications Blazor Server, installez la dernière version de Visual Studio 2019 avec la charge de travail ASP.NET et Web de développement. Pour Blazor WebAssembly, vous avez besoin au moins de Visual Studio 2019 16.6+. Une autre alternative serait d'utiliser le code Visual Studio. Cliquez ici pour plus d'informations.

Plotly.blazor avec version> = 2.0.0 nécessite .NET 6 ou plus.

Installation

Après avoir créé votre projet Blazor, vous devez faire les étapes suivantes:

Installez le dernier package NuGet

Utilisation du gestionnaire de packages

 Install-Package Plotly.Blazor

Utilisation de .NET CLI

dotnet add package Plotly.Blazor

Si vous utilisez 4.1.0 ou plus bas , ajoutez les lignes suivantes à votre _layout.cshtml au-dessus du _/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 >

Ajoutez les lignes suivantes à votre _import.razor

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

Maintenant, nous sommes prêts à partir! ?

Usage

Créer le composant de rasoir

Info: La référence du graphique est importante afin que nous puissions mettre à jour le graphique plus tard.

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

Générez des données initiales pour votre tracé.

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

Générez des données supplémentaires pour votre tracé.

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