TablePress Erweiterung: Chartist

Beschreibung

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;
}