Dieses Plugin ist nicht mit den jüngsten 3 Hauptversionen von WordPress getestet worden. Es wird möglicherweise nicht mehr gewartet oder unterstützt und kann Kompatibilitätsprobleme haben, wenn es mit neueren Versionen von WordPress verwendet wird.

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

Screenshots

  • [table-chart id=1 /]
  • [table-chart id=1 showarea=true /]
  • [table-chart id=1 showarea=true linesmooth=false /]
  • [table-chart id=1 linesmooth=false showpoint=false /]
  • [table-chart id=1 showarea=true showline=false showpoint=false /]
  • [table-chart id=1 low=0 high=8 /]
  • [table-chart id=1 chart=bar /]
  • [table-chart id=1 chart=pie /]
  • [table-chart id=1 chart=percent /]

Installation

Voraussetzung (vorher installieren): Das TablePress Plugin

  1. Öffne Plugins->Add New und suche nach tablepress chartist
  2. Klicke Installieren
  3. Aktiviere das Plugin nach der Installation.

FAQ

Installationsanweisungen

Voraussetzung (vorher installieren): Das TablePress Plugin

  1. Öffne Plugins->Add New und suche nach tablepress chartist
  2. Klicke Installieren
  3. Aktiviere das Plugin nach der Installation.

Rezensionen

Lies alle 3 Rezensionen

Mitwirkende & Entwickler

„TablePress Erweiterung: Chartist“ ist Open-Source-Software. Folgende Menschen haben an diesem Plugin mitgewirkt:

Mitwirkende

Änderungsprotokoll

0.9

  • chartist.js auf Version 0.11.0 aktualisiert

0.8

  • Unterstützung von Kuchendiagramme mit Prozentangaben hinzugefügt.
  • Animation für Balkendiagramme hinzugefügt.
  • Hinzugefügte Parameter: label_offset, chart_padding und donut_width.

0.7

  • Horizontale Balkendiagramme hinzugefügt (horizontal=true)
  • Gestapelte Balkendiagramme hinzugefügt (stack=true)
  • Einfache Animation für Liniendiagramme hinzugefügt
  • “Addition of donut chart type #1” von shaharhesse gemerged

0.6

Wechsel zum [table-chart] Shortcode.

0.5.1

  • Zurück zu PHP json_encode().

0.5

  • Inkompatible Änderung: Optionale Parameter wurden vereinfacht (der Prefix chartist_ wurde entfernt), neue optionale Parameter sind: showline, showarea, low, high, linesmooth, showpoint und aspect_ratio. Für Beispiele, siehe Screenshots.
  • chart=pie und chart=percent hinzugefügt.

0.4

  • Balkendiagramme hinzugefügt: chartist_chart=bar.

0.3

  • 0.3 Unterstützung für CSS-Anpassungen hinzugefügt

0.2

  • Weitere optionale Parameter hinzugefügt

0.1

  • Erster Release