Plotly.Blazor Download - Plotly.Blazor Quellcode Download

Plotly.Blazor

Andere Kategorien

v5.4.0

Herunterladen

Plotly.blazor

Diese Bibliothek packt das bekannte Diagrammbibliotheks-Plotly.js in eine Rasierdauerkomponente ein, die in einem Blazor-Projekt verwendet werden kann. Der Vorteil dieser Wrapper besteht darin, dass das Handlungsschema selbst zur Erzeugung der Klassen verwendet wird. Mit Hilfe des Generators können Sie also automatisch auf die neueste Plotly.js -Version aktualisieren.

Erste Schritte

Voraussetzungen

So installieren Sie die neueste Version von Visual Studio 2019 mit der Workload von ASP.NET und Web Development, um Blazor Server -Apps zu erstellen. Für Blazor WebAssembly benötigen Sie mindestens Visual Studio 2019 16.6+. Eine andere Alternative wäre die Verwendung von Visual Studio -Code. Klicken Sie hier, um weitere Informationen zu erhalten.

Plotly.blazor mit Version> = 2.0.0 erfordert .NET 6 oder höher.

Installation

Nachdem Sie Ihr Blazor -Projekt erstellt haben, müssen Sie die folgenden Schritte ausführen:

Installieren Sie das neueste Nuget -Paket

Verwenden von Paketmanager

 Install-Package Plotly.Blazor

Verwenden von .NET CLI

dotnet add package Plotly.Blazor

Wenn Sie 4.1.0 oder niedriger verwenden , fügen Sie Ihrem _layout.cshtml über dem _/framework/blazor.webassembly.js oder _/framework/blazor.server.js die folgenden Zeilen hinzu.

< 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 >

Fügen Sie Ihren _imports.razor die folgenden Zeilen hinzu

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

Jetzt sind wir bereit zu gehen! ?

Verwendung

Erstellen Sie die Rasierkomponente

Info: Die Diagrammreferenz ist wichtig, damit wir das Diagramm später aktualisieren können.

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

Generieren Sie einige erste Daten für Ihr Diagramm.

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

Generieren Sie einige zusätzliche Daten für Ihr Diagramm.

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