Wykres Divi

Moduł natywny Divi 5

Piękne wykresy
DoDiwi 5

Dodaj oszałamiające, interaktywne wizualizacje danych do dowolnej strony Divi — nie wymaga kodowania. Obsługiwany przez Chart.js, w pełni responsywny i głęboko zintegrowany z Divi 5 Visual Builder.

8Typy wykresów
3Zestawy danych na wykres
8Selektory kolorów plasterków
100%Podgląd kreatora wizualizacji

Każdy wykres, jakiego kiedykolwiek będziesz potrzebować

Od klasycznych wykresów słupkowych po diagramy radarowe,Wykres Divizapewnia osiem różnych typów wizualizacji od razu po wyjęciu z pudełka.

📊

Pasek (kolumna)

Klasyczne pionowe słupki, idealne do porównywania kategorii obok siebie.

📉

Pasek (poziomy)

Odwrócone paski dla długich etykiet lub rankingów — łatwe do odczytania.

📈

Linia

Śledź trendy w czasie za pomocą płynnych wykresów liniowych zawierających wiele zestawów danych.

🌊

Obszar

Wypełnione wykresy liniowe podkreślające wolumen i wartości skumulowane.

🥧

Ciasto

Szybkie wyświetlanie proporcji dzięki w pełni konfigurowalnym kolorom plasterków.

🍩

Pączek

Nowoczesna wersja ciasta — idealna do pulpitów nawigacyjnych i wyświetlaczy wskaźników KPI.

🕸️

Radar

Porównaj wiele atrybutów w kilku zbiorach danych w jednej pajęczej sieci.

🎯

Obszar polarny

Segmenty promieniowe dobierane według wartości — atrakcyjne, bogate w dane i niepowtarzalne.

Wszystko, czego potrzebujesz, nic, czego nie potrzebujesz

🎨

Podgląd narzędzia Visual Builder na żywo

Każda zmiana dokonana w panelu Divi 5 jest natychmiast odzwierciedlana na płótnie — bez odświeżania strony, bez zgadywania.

🖌️

8 indywidualnych selektorów kolorów plasterków

Wykresy kołowe, pączkowe i polarne umożliwiają ustawienie odrębnego koloru dla każdego plasterka za pomocą natywnych selektorów kolorów Divi — spójnych w edytorze i interfejsie użytkownika.

📐

Do 3 zestawów danych

Nakładaj wiele serii danych na wykresy słupkowe, liniowe, obszarowe i radarowe, aby uzyskać bogate, porównawcze wizualizacje.

📱

W pełni responsywny

Wykresy zmieniają rozmiar płynnie na dowolnym rozmiarze ekranu. Ustaw preferowaną wysokość w pikselach, a Chart.js zajmie się resztą.

Płynne animacje

Konfigurowalny czas trwania animacji (0–3000 ms) zapewnia dopracowany efekt odsłonięcia za każdym razem, gdy wykres pojawia się w rzutni.

🏷️

Interaktywna legenda

Kliknij dowolny element legendy, aby pokazać lub ukryć ten zbiór danych. Informacje zwrotne od kursora wskaźnika sprawiają, że wykrywalność jest oczywista dla użytkowników końcowych.

🔡

Etykiety osi

Add descriptive X and Y axis labels directly from the Design panel to give your data the context it deserves.

🛡️

100% WordPress Standards

PHPCS-clean code following the WordPress coding standard, PSR-4 autoloading, and zero legacy Divi module API — built for the long term.

Deep customisation, zero complexity

All settings live inside the familiar Divi panel, organised into clear groups so you always know where to look.

Chart Settings

  • Chart type (8 options)
  • Chart title
  • Category labels (comma-separated)

Slice Colors

  • 8 individual color pickers
  • Applied to Pie, Donut & Polar Area
  • Consistent VB ↔ frontend rendering

Dataset 1

  • Label, values (comma-separated)
  • Color picker
  • Fill opacity (Line & Area)

Datasets 2 & 3 (Optional)

  • Toggle on/off independently
  • Label, values, color picker
  • Stacks on Bar, Line, Area, Radar

Chart Style

  • Height (150 – 900 px)
  • Background color
  • Show / hide legend + position
  • Show / hide grid lines
  • Animation duration (ms)
  • Border / line width (px)
  • Point radius (Line & Area)

Etykiety osi

  • X-axis label text
  • Y-axis label text

Works right out of the box

Install, activate, and drag the Graph & Chart module into any Divi 5 page. No extra libraries to install — Chart.js is loaded automatically from CDN.

✅ Divi 5 (Divi Builder 5.x)
✅ WordPress 6.0+
✅ PHP 7.4+
✅ Chart.js 4.4 (loaded via CDN)
❌ No Divi 4 / Legacy Builder support
Polski