Plotly.Blazor Download - Plotly.Blazor Source Code Download

Plotly.Blazor

فئات أخرى

v5.4.0

تنزيل

Plotly.Blazor

هذه المكتبة حزم مكتبة المخططات المعروفة Plotly.js في مكون الحلاقة التي يمكن استخدامها في مشروع Blazor. ميزة هذا الغلاف هي أن مخطط المؤسسة نفسه يستخدم لإنشاء الفصول. حتى تتمكن من التحديث تلقائيًا إلى أحدث إصدار من Plotly.js بمساعدة المولد.

ابدء

المتطلبات الأساسية

لإنشاء تطبيقات Blazor Server ، قم بتثبيت أحدث إصدار من Visual Studio 2019 مع عبء عمل ASP.NET و Web Development. بالنسبة لـ Blazor Webassembly ، تحتاج إلى على الأقل Visual Studio 2019 16.6+. بديل آخر هو استخدام رمز Visual Studio. انقر هنا لمزيد من المعلومات.

Plotly.Blazor مع الإصدار> = 2.0.0 يتطلب .NET 6 أو أعلى.

التثبيت

بعد إنشاء مشروع Blazor الخاص بك ، تحتاج إلى القيام بالخطوات التالية:

تثبيت أحدث حزمة nuget

باستخدام Manager Package

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