Divi-Diagramm
Schöne Diagramme
fürDivision 5
Fügen Sie beeindruckende, interaktive Datenvisualisierungen zu jeder Divi-Seite hinzu – keine Programmierung erforderlich. Unterstützt von Chart.js, vollständig reaktionsfähig und tief in den Divi 5 Visual Builder integriert.
Diagrammtypen
Jedes Diagramm, das Sie jemals brauchen werden
Vom klassischen Balkendiagramm bis zum Radardiagramm,Divi-Diagrammbietet Ihnen sofort acht verschiedene Visualisierungstypen.
Balken (Spalte)
Klassische vertikale Balken, ideal zum Vergleichen von Kategorien nebeneinander.
Balken (horizontal)
Umgedrehte Balken für lange Beschriftungen oder Ranglisten – mühelos lesbar.
Linie
Verfolgen Sie Trends im Zeitverlauf mit glatten Liniendiagrammen mit mehreren Datensätzen.
Bereich
Gefüllte Liniendiagramme, die Volumen und kumulative Werte hervorheben.
Torte
Zeigen Sie Proportionen auf einen Blick mit vollständig anpassbaren Schnittfarben an.
Krapfen
Eine moderne Variante – ideal für Dashboards und KPI-Anzeigen.
Radar
Vergleichen Sie mehrere Attribute über mehrere Datensätze hinweg in einem einzigen Spinnennetz.
Polargebiet
Radiale Segmente, sortiert nach Wert – auffällig, datenreich und einzigartig.
Warum es wählen?
Alles, was Sie brauchen, nichts, was Sie nicht brauchen
Live-Visual Builder-Vorschau
Jede Änderung, die Sie im Divi 5-Bedienfeld vornehmen, wird sofort auf der Leinwand angezeigt – keine Seitenaktualisierung, kein Rätselraten.
8 individuelle Slice-Farbwähler
Mit Kreis-, Donut- und Polarflächendiagrammen können Sie über native Divi-Farbwähler eine eigene Farbe für jedes Segment festlegen – konsistent zwischen Editor und Frontend.
Bis zu 3 Datensätze
Überlagern Sie mehrere Datenreihen mit Balken-, Linien-, Flächen- und Radardiagrammen für umfassende, vergleichende Visualisierungen.
Vollständig reaktionsfähig
Die Diagrammgröße ändert sich fließend auf jeder Bildschirmgröße. Legen Sie Ihre bevorzugte Höhe in Pixel fest und Chart.js erledigt den Rest.
Reibungslose Animationen
Die konfigurierbare Animationsdauer (0–3000 ms) erzeugt jedes Mal, wenn das Diagramm das Ansichtsfenster betritt, einen ausgefeilten Enthüllungseffekt.
Interaktive Legende
Klicken Sie auf ein beliebiges Legendenelement, um diesen Datensatz anzuzeigen oder auszublenden. Das Feedback des Zeiger-Cursors macht die Erkennbarkeit für Endbenutzer offensichtlich.
Achsenbeschriftungen
Fügen Sie beschreibende X- und Y-Achsenbeschriftungen direkt aus dem Design-Bedienfeld hinzu, um Ihren Daten den Kontext zu geben, den sie verdienen.
100 % WordPress-Standards
PHPCS-sauberer Code, der dem WordPress-Codierungsstandard folgt, PSR-4-Autoloading und keine Legacy-Divi-Modul-API – langfristig konzipiert.
Moduleinstellungen
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)
Achsenbeschriftungen
- X-axis label text
- Y-axis label text
Requirements
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.
