TL;DR: Blazor Sankey Diagram спрощує візуалізацію складних потоків даних, таких як розподіл енергії, поведінка користувачів або фінансові розрахунки. Він включає вузли, зв'язки, підписи, легенди та підказки для інтуїтивного розуміння. Легко зв'язати дані і налаштувати елементи для ясності та стилю. Цей універсальний компонент перетворює складні дані на інтерактивні, візуально привабливі інсайти.
Візуалізація складних взаємозв'язків і потоків даних завжди була проблемою для розробників і аналітиків даних. Традиційні діаграми та графіки часто не здатні показати багатошарові, взаємопов'язані дані, такі як фінансові розподіли, розподіл енергії або шаблони поведінки користувачів.
Sankey діаграма є потужним інструментом візуалізації, який спрощує розуміння цих взаємозв'язків через пропорційні потоки та зв'язки. Завдяки компоненту Sankey Diagram у Syncfusion Blazor suite, розробники .NET тепер мають на руках надійне рішення.
Компонент Blazor Sankey Diagram має багато можливостей, які роблять його універсальним інструментом для різноманітних візуалізаційних потреб.
Давайте розглянемо основні можливості Blazor Sankey Diagram на практичному прикладі для аналізу використання енергії.
Початок роботи з Blazor Sankey Diagram
Ознайомтесь з документацією для початку роботи з Blazor Sankey Diagram для встановлення та налаштування.
Основні можливості
Компонент Blazor Sankey Diagram підтримує такі основні можливості:
Зв'язування даних
Компонент Blazor Sankey Diagram надає інтуїтивно зрозумілий спосіб візуалізації взаємозв'язків і потоків між категоріями за допомогою вузлів і зв'язків. Зв'язування даних дозволяє легко надати необхідну інформацію для ефективного рендерингу Sankey діаграми. Діаграма базується на колекціях об'єктів SankeyDataNode та SankeyDataLink, які попередньо визначені в просторі імен Syncfusion.Blazor.Sankey, що усуває необхідність створення кастомних моделей даних.
Вузли представляють сутності або категорії в потоці та включають такі властивості, як Id та налаштовувані підписи. Зв'язки визначають з'єднання з властивостями, такими як SourceId, TargetId та Value, щоб представляти величини потоку. Для зв'язування даних розробникам потрібно створити та заповнити ці колекції, що дозволить компоненту динамічно генерувати діаграму.
Вузли
Вузли є основними елементами в Blazor Sankey Diagram. Вони представляють сутності або етапи в потоці процесу і визначаються за допомогою колекції об'єктів SankeyDataNode. Кожен вузол потребує унікальний ID і може включати додаткові властивості для налаштування. Вузли можна додатково стилізувати за допомогою таких параметрів, як колір, ширина, відступи та налаштування підписів.
Зв'язки
Зв'язки в Sankey діаграмі візуально представляють потік кількостей між вузлами, ілюструючи з'єднання та взаємозв'язки між різними етапами або сутностями в процесі.
Кожен зв'язок визначається за допомогою об'єкта SankeyDataLink з властивостями SourceId (початковий вузол), TargetId (кінцевий вузол) та Value, яка визначає товщину зв'язку, що відображає кількість потоку.
Налаштування SankeyLinkSettings дозволяють налаштовувати вигляд зв'язку, включаючи Color для візуального відрізнення (HEX або RGBA), Opacity для прозорості (від 0.0 до 1.0), а також розширені параметри, такі як ColorType, щоб узгодити кольори зв'язку з джерелом, ціллю або градієнтним змішанням обох. Додатково, такі властивості, як HighlightOpacity та InactiveOpacity, покращують інтерактивність, візуально підкреслюючи активні зв'язки, одночасно затемнюючи неактивні.
Ці налаштування допомагають створювати чіткі, естетично привабливі візуалізації, які ефективно передають потоки даних.
Ось зображення для ілюстрації.
Вузли та зв'язки в Blazor Sankey Diagram
Підписи
Підписи використовуються для передачі текстової інформації про вузли, покращуючи читабельність та розуміння потоків даних.
SankeyLabelSettings надає широкі можливості для налаштування, включаючи розмір шрифта, колір, товщину, відступи та стилі, що дозволяє безшовно узгодити з дизайном вашого додатку.
Ці налаштування гарантують, що підписи будуть не тільки візуально привабливими, але й ефективно передавати основну інформацію, що дозволяє створити більш вдосконалену та професійну візуалізацію даних.
Ось зображення для ілюстрації.
Підписи в Blazor Sankey Diagram
Легенди
Легенди виконують важливу роль у візуальному представленні категорій або елементів у потоці даних, допомагаючи в інтерпретації та аналізі діаграми.
SankeyLegendSettings пропонує різноманітні можливості для налаштування, даючи можливість керувати видимістю, розташуванням, розмірами та іншими стилістичними властивостями. Завдяки таким функціям, як налаштування розмірів, відступів, кольору фону, прозорості та додатковим заголовкам, легенди можна адаптувати до естетики додатку та функціональних вимог.
Додатково, розширені налаштування, як підсвічування елементів, інверсія порядку та перевертання елементів, покращують інтерактивність і ясність, надаючи користувачам візуально привабливий та інтуїтивно зрозумілий спосіб розуміти складні взаємозв'язки даних.
Ось зображення для ілюстрації.
Легенди в Blazor Sankey Diagram
Підказки
Підказки надають динамічну, контекстну інформацію про вузли та зв'язки, покращуючи здатність користувача інтерпретувати потік даних. SankeyTooltipSettings дозволяє здійснювати розширене налаштування підказок, щоб вони доповнювали естетику діаграми та її зручність.
Підказки можна налаштувати за зовнішнім виглядом, поведінкою та вмістом, включаючи параметри, такі як колір фону, прозорість та анімації. Розширені конфігурації дозволяють створювати кастомізовані шаблони за допомогою SankeyNodeTemplate та SankeyLinkTemplate, даючи точний контроль над розміщенням та вмістом підказок. Ця гнучкість гарантує, що підказки ефективно передаватимуть важливу інформацію, покращуючи загальний досвід візуалізації даних.
Підказки в Blazor Sankey Diagram
Найкраща частина Blazor Sankey Diagram полягає в тому, що такі функції, як градієнт кольору зв'язку (тип змішування), легенда, анімація та підказки, увімкнені за замовчуванням, щоб забезпечити найкращий вигляд та взаємодію з мінімумом коду.
Аналіз потоку енергії
Ми ознайомились з приголомшливими можливостями Blazor Sankey Diagram.
Тепер давайте подивимося, як візуалізувати дані про використання енергії за допомогою цього компонента.
Ми почнемо з категорій джерел енергії, розіб'ємо їх на носії та поділимо на сектори використання.
Ось код для прикладу.
@page "/"
@using Syncfusion.Blazor
@using Syncfusion.Blazor.Sankey
@code {
private List Nodes = new List();
private List Links = new List();
protected override void OnInitialized()
{
Nodes = new List()
{
new SankeyDataNode() { Id = "Solar", Label = new SankeyDataLabel() { Text = "Solar" } },
new SankeyDataNode() { Id = "Wind", Label = new SankeyDataLabel() { Text = "Wind" } },
new SankeyDataNode() { Id = "Hydro", Label = new SankeyDataLabel() { Text = "Hydro" } },
new SankeyDataNode() { Id = "Nuclear", Label = new SankeyDataLabel() { Text = "Nuclear" } },
new SankeyDataNode() { Id = "Coal", Label = new SankeyDataLabel() { Text = "Coal" } },
new SankeyDataNode() { Id = "Natural Gas", Label = new SankeyDataLabel() { Text = "Natural Gas" } },
new SankeyDataNode() { Id = "Oil", Label = new SankeyDataLabel() { Text = "Oil" } },
new SankeyDataNode() { Id = "Electricity", Label = new SankeyDataLabel() { Text = "Electricity" } },
new SankeyDataNode() { Id = "Heat", Label = new SankeyDataLabel() { Text = "Heat" } },
new SankeyDataNode() { Id = "Fuel", Label = new SankeyDataLabel() { Text = "Fuel" } },
new SankeyDataNode() { Id = "Residential", Label = new SankeyDataLabel() { Text = "Residential" } },
new SankeyDataNode() { Id = "Commercial", Label = new SankeyDataLabel() { Text = "Commercial" } },
new SankeyDataNode() { Id = "Industrial", Label = new SankeyDataLabel() { Text = "Industrial" } },
new SankeyDataNode() { Id = "Transportation", Label = new SankeyDataLabel() { Text = "Transportation" } },
new SankeyDataNode() { Id = "Energy Services", Label = new SankeyDataLabel() { Text = "Energy Services" } },
new SankeyDataNode() { Id = "Losses", Label = new SankeyDataLabel() { Text = "Losses" } }
};
Links = new List()
{
// Джерела енергії до носіїв
new SankeyDataLink() { SourceId = "Solar", TargetId = "Electricity", Value = 100 },
new SankeyDataLink() { SourceId = "Wind", TargetId = "Electricity", Value = 120 },
new SankeyDataLink() { SourceId = "Hydro", TargetId = "Electricity", Value = 80 },
new SankeyDataLink() { SourceId = "Nuclear", TargetId = "Electricity", Value = 90 },
new SankeyDataLink() { SourceId = "Coal", TargetId = "Electricity", Value = 200 },
new SankeyDataLink() { SourceId = "Natural Gas", TargetId = "Electricity", Value = 130 },
new SankeyDataLink() { SourceId = "Natural Gas", TargetId = "Heat", Value = 80 },
new SankeyDataLink() { SourceId = "Oil", TargetId = "Fuel", Value = 250 },
// Носії енергії до секторів
new SankeyDataLink() { SourceId = "Electricity", TargetId = "Residential", Value = 170 },
new SankeyDataLink() { SourceId = "Electricity", TargetId = "Commercial", Value = 160 },
new SankeyDataLink() { SourceId = "Electricity", TargetId = "Industrial", Value = 210 },
new SankeyDataLink() { SourceId = "Heat", TargetId = "Residential", Value = 40 },
new SankeyDataLink() { SourceId = "Heat", TargetId = "Commercial", Value = 20 },
new SankeyDataLink() { SourceId = "Heat", TargetId = "Industrial", Value = 20 },
new SankeyDataLink() { SourceId = "Fuel", TargetId = "Transportation", Value = 200 },
new SankeyDataLink() { SourceId = "Fuel", TargetId = "Industrial", Value = 50 },
// Сектори до кінцевого використання та втрат
new SankeyDataLink() { SourceId = "Residential", TargetId = "Energy Services", Value = 180 },
new SankeyDataLink() { SourceId = "Commercial", TargetId = "Energy Services", Value = 150 },
new SankeyDataLink() { SourceId = "Industrial", TargetId = "Energy Services", Value = 230 },
new SankeyDataLink() { SourceId = "Transportation", TargetId = "Energy Services", Value = 150 },
new SankeyDataLink() { SourceId = "Residential", TargetId = "Losses", Value = 30 },
new SankeyDataLink() { SourceId = "Commercial", TargetId = "Losses", Value = 30 },
new SankeyDataLink() { SourceId = "Industrial", TargetId = "Losses", Value = 50 },
new SankeyDataLink() { SourceId = "Transportation", TargetId = "Losses", Value = 50 }
};
base.OnInitialized();
}
У наведеному прикладі коду:
- Nodes (Вузли): Представляють джерела енергії, такі як Сонце (Solar), Вітер (Wind) і Гідро (Hydro), носії енергії, як-от Електрика (Electricity), Тепло (Heat) і Паливо (Fuel), а також сектори використання, такі як Житловий (Residential), Комерційний (Commercial), Промисловий (Industrial) і Транспортний (Transportation).
- Links (Зв'язки): Визначають потоки між вузлами, показуючи пропорційний потік енергії від джерел до носіїв, від носіїв до секторів використання та від секторів до кінцевого використання або втрат.
Ця візуалізація чітко пояснює потік енергії від джерел до носіїв та їх розподіл серед різних секторів використання.
Це підкреслює пропорції енергії, яка ефективно використовується, порівняно з енергією, що втрачається.
Використовуючи компонент Blazor Sankey Diagram, ви можете перетворити складні дані про енергоспоживання на інтуїтивно зрозуміле та візуально привабливе подання, що надає негайні уявлення про розподіл енергії та її споживання у ваших додатках.
Перегляньте наступне зображення.
Візуалізація складних даних за допомогою компонента Blazor Sankey Diagram
Висновок
Дякуємо за прочитання! Новий компонент Blazor Sankey Diagram дозволяє розробникам створювати значущі візуалізації складних потоків даних з мінімальними зусиллями. Його гнучкість і багатий набір функцій роблять його безцінним інструментом для широкого спектру додатків, від фінансового аналізу до оптимізації процесів.
Досліджуйте можливості Blazor Sankey Diagram та підвищуйте рівень вашої візуалізації даних! Спробуйте його і залиште відгуки в розділі коментарів нижче.
Наші існуючі клієнти можуть завантажити останню версію з розділу Ліцензії та Завантаження. Якщо ви не є клієнтом Syncfusion®, спробуйте наш 30-денний безкоштовний trial, щоб ознайомитися з новими можливостями.
Ви також можете звертатися до нас через наш форум підтримки, портал підтримки або портал зворотного зв'язку. Ми завжди раді допомогти вам!
Схожі блоги
- Легке керування великими завантаженнями файлів за допомогою Blazor File Manager
- Представляємо новий компонент Blazor Chat UI
- Що нового в Blazor: 2024, Том 4
- Blazor Kanban з підтримкою ШІ: інтеграція з пакетами Microsoft Extension
Спочатку опубліковано на https://www.syncfusion.com 17 січня 2025 року.
Перекладено з: Easily Visualize Complex Data Flows With Blazor Sankey Diagram