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
Umfassende Anpassung, keine Komplexität
Alle Einstellungen befinden sich im vertrauten Divi-Bedienfeld und sind in übersichtlichen Gruppen organisiert, sodass Sie immer wissen, wo Sie suchen müssen.
Diagrammeinstellungen
- Diagrammtyp (8 Optionen)
- Diagrammtitel
- Kategoriebezeichnungen (durch Kommas getrennt)
Slice-Farben
- 8 individuelle Farbwähler
- Wird auf Kuchen und Donuts angewendet
- Konsistentes VB ↔ Frontend-Rendering
Datensatz 1
- Bezeichnung, Werte (durch Kommas getrennt)
- Farbauswahl
- Deckkraft der Füllung (Linie
Datensätze 2
- Unabhängiges Ein-/Ausschalten
- Beschriftung, Werte, Farbauswahl
- Stapelt auf Balken, Linie, Fläche, Radar
Diagrammstil
- Höhe (150 – 900 px)
- Hintergrundfarbe
- Legendenposition ein-/ausblenden
- Gitterlinien ein-/ausblenden
- Animationsdauer (ms)
- Rahmen-/Linienbreite (px)
- Punktradius (Linie
Achsenbeschriftungen
- Beschriftungstext für die X-Achse
- Y-Achsen-Beschriftungstext
Anforderungen
Funktioniert sofort nach dem Auspacken
Installieren, aktivieren und ziehen Sie dasGraphModul in jede Divi 5-Seite. Es müssen keine zusätzlichen Bibliotheken installiert werden – Chart.js wird automatisch vom CDN geladen.
