Download Plotly.Blazor - download kode sumber Plotly.Blazor

Plotly.Blazor

Kategori lainnya

v5.4.0

Unduh

Plotly.blazor

Perpustakaan ini mengemas pustaka charting terkenal secara plot.js ke dalam komponen pisau cukur yang dapat digunakan dalam proyek Blazor. Keuntungan dari pembungkus ini adalah bahwa skema plotly itu sendiri digunakan untuk menghasilkan kelas. Jadi Anda dapat secara otomatis memperbarui ke versi plotly.js terbaru dengan bantuan generator.

Memulai

Prasyarat

Untuk membuat aplikasi server Blazor, instal versi terbaru Visual Studio 2019 dengan ASP.NET dan Web Development Workload. Untuk Blazor WebAssembly Anda membutuhkan setidaknya Visual Studio 2019 16.6+. Alternatif lain adalah menggunakan kode studio visual. Klik di sini untuk informasi lebih lanjut.

Plotly.blazor dengan versi> = 2.0.0 membutuhkan .net 6 atau lebih tinggi.

Menginstal

Setelah Anda membuat proyek Blazor Anda, Anda perlu melakukan langkah -langkah berikut:

Instal Paket Nuget Terbaru

Menggunakan Manajer Paket

 Install-Package Plotly.Blazor

Menggunakan .net CLI

dotnet add package Plotly.Blazor

Jika Anda menggunakan 4.1.0 atau lebih rendah , lalu tambahkan baris berikut ke _layout.cshtml di atas _/framework/blazor.webassembly.js atau _/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 >

Tambahkan baris berikut ke _imports.razor Anda

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

Sekarang kami siap untuk pergi! ?

Penggunaan

Buat komponen pisau cukur

Info: Referensi bagan penting sehingga kami dapat memperbarui bagan nanti.

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

Hasilkan beberapa data awal untuk plot Anda.

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

Hasilkan beberapa data tambahan untuk plot Anda.

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