Plotly.Blazor ดาวน์โหลด - Plotly.Blazor ซอร์สโค้ดดาวน์โหลด

Plotly.Blazor

หมวดหมู่อื่นๆ

v5.4.0

ดาวน์โหลด

วางแผน

ไลบรารีนี้จัดทำแผนภูมิที่รู้จักกันดีในการวางแผนการวางแผนลงในส่วนประกอบมีดโกนที่สามารถใช้ในโครงการ Blazor ข้อได้เปรียบของเสื้อคลุมนี้คือรูปแบบการวางแผนนั้นใช้ในการสร้างคลาส ดังนั้นคุณสามารถอัปเดตเป็นเวอร์ชัน Plotly.js ล่าสุดโดยอัตโนมัติด้วยความช่วยเหลือของเครื่องกำเนิดไฟฟ้า

เริ่มต้น

ข้อกำหนดเบื้องต้น

ในการสร้างแอพเซิร์ฟเวอร์ Blazor ให้ติดตั้ง Visual Studio 2019 รุ่นล่าสุดด้วยเวิร์กโหลด ASP.NET และการพัฒนาเว็บ สำหรับ Blazor WebAssembly คุณต้องการอย่างน้อย Visual Studio 2019 16.6+ อีกทางเลือกหนึ่งคือการใช้รหัส Visual Studio คลิกที่นี่สำหรับข้อมูลเพิ่มเติม

plotly.blazor พร้อมเวอร์ชัน> = 2.0.0 ต้องการ. NET 6 หรือสูงกว่า

การติดตั้ง

หลังจากที่คุณสร้างโครงการ Blazor แล้วคุณต้องทำตามขั้นตอนต่อไปนี้:

ติดตั้งแพ็คเกจ NuGet ล่าสุด

ใช้แพ็คเกจ Manager

 Install-Package Plotly.Blazor

ใช้. NET CLI

dotnet add package Plotly.Blazor

หากคุณใช้ 4.1.0 หรือต่ำกว่า ให้เพิ่มบรรทัดต่อไปนี้ไปยัง _layout.cshtml ของคุณ เหนือ _/framework/blazor.webassembly.js หรือ _/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 >

เพิ่มบรรทัดต่อไปนี้ใน _imports.razor ของคุณ

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

ตอนนี้เราพร้อมที่จะไป! -

การใช้งาน

สร้างองค์ประกอบมีดโกน

ข้อมูล: การอ้างอิงแผนภูมิมีความสำคัญเพื่อให้เราสามารถอัปเดตแผนภูมิในภายหลัง

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

สร้างข้อมูลเริ่มต้นบางอย่างสำหรับพล็อตของคุณ

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

สร้างข้อมูลเพิ่มเติมสำหรับพล็อตของคุณ

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