Plotly.Blazor скачать - Plotly.Blazor исходный код скачать

Plotly.Blazor

Другие категории

v5.4.0

Скачать

Plotly.blazor

Эта библиотека упаковывает хорошо известную диаграмму библиотеки plotly.js в компонент бритвы, который можно использовать в проекте Blazor. Преимущество этой обертки состоит в том, что сама схема сюжета используется для генерации классов. Таким образом, вы можете автоматически обновить до последней версии plotly.js с помощью генератора.

Начиная

Предварительные условия

Чтобы создать приложения Blazor Server, установите последнюю версию Visual Studio 2019 с рабочей нагрузкой ASP.NET и веб -разработки. Для Blazor Webassembly вам нужна как минимум Visual Studio 2019 16,6+. Другой альтернативой будет использование кода Visual Studio. Нажмите здесь для получения дополнительной информации.

Plotly.blazor с версией> = 2.0.0 требует .NET 6 или выше.

Установка

После того, как вы создали свой Blazor Project, вам нужно сделать следующие шаги:

Установите последний пакет Nuget

Используя диспетчер пакетов

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