TablePress Erweiterung: Chartist
Mithilfe von Chartist.js und TablePress erstellt diese Erweiterung responsive Diagramme mit Daten aus einer TablePress Tabelle.
Verwendung
Füge den Shortcode [table-chart id=123 /] in einem Beitrag oder einer Seite hinzu um ein Diagramm der TablePress Tabelle 123 zu erstellen.
Optionale Parameter:
- Zeige/Verstecke Diagrammlinien:
showline=true(Standard: true) - Zeige/Verstecke Diagrammbereich:
showarea=false(Standard: false) - Untere Begrenzung der Y-Achse:
low=0 - Setze den Höchstwert der Y-Achse:
high=10 - Setze die Linienbreite des Donutdiagramms:
donut_width=200(Standard: false) - Aktiviere/Deaktiviere geglättete Linien:
linesmooth=true(Standard: true) - Aktiviere/Deaktiviere Linienpunkte:
showpoint=true(Standard: true) - Aktiviere/Deaktiviere horizontale Balken:
horizontal=true(Standard: false) - Aktiviere/Deaktiviere gestapelte Balken:
stack=true(Standard: false) - Setze das Seitenverhältnis:
aspect_ratio=3:4(Standard: 3:4) Alternativen: 1, 15:16, 8:9, 5:6, 4:5, 3:4, 2:3, 5:8, 1:1.618, 3:5, 9:16, 8:15, 1:2, 2:5, 3:8, 1:3, or 1:4 - Wähle die Diagrammart:
chart=bar(Standard: line) Alternativen: line, bar, pie, donut, percent or piepercent (eine Mischung aus pie und percent). - Setze den Abstand zu den Beschriftungen:
label_offset=100(Standard: false) - Setze den Außenabstand:
chart_padding=100(Standard: false) - Verwende Animationen (nicht für alle Diagramme verfügbar):
animation=buildup(Standard: false)
Wenn die „Table Head Row“-Einstellung für diese Tabelle aktiviert ist, wird das Plugin diese für die Bezeichnungen verwenden. Alle weiteren reihen werden als Linien oder Balken angezeigt. Kuchen- und Prozentdiagramme nutzen ausschließlich die erste Datenreihe. Prozentdiagramme ignorieren zudem die Header Row.
CSS Anpassungen
Wenn du den Standardstyle überschreiben möchtest, kannst du eine tablepress-chartist-custom.css in wp-content anlegen. Die Datei wird nach der libdist/chartist.min.css geladen.
Beispiel:
/**
* SVG Shape CSS properties: http://tutorials.jenkov.com/svg/svg-and-css.html#shape-css-properties
*/
/* First line / bar is .ct-series-a, next is .ct-series-b etc. */
.ct-chart .ct-series.ct-series-a .ct-bar,
.ct-chart .ct-series.ct-series-a .ct-line,
.ct-chart .ct-series.ct-series-a .ct-point {
stroke: #073DA0;
}
.ct-series .ct-line, .ct-chart .ct-bar {
fill: none;
stroke-width: 10px;
}
.ct-chart .ct-point {
stroke-width: 10px;
stroke-linecap: round;
}