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.

Rezensionen

21. April 2022
Simple and quite flexible way to save needing to import images from Excel or some other solution. Eliminates a complex process if data is updated. Note there is a patch needed, with the code in support section, but I am considering updating for my own use and will share patched version if anyone is interested in avoiding touching code.
Alle 5 Rezensionen lesen

Mitwirkende & Entwickler

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

Mitwirkende

„TablePress Erweiterung: Chartist“ wurde in 1 Sprache übersetzt. Danke an die Übersetzerinnen und Übersetzer für ihre Mitwirkung.

Übersetze „TablePress Erweiterung: Chartist“ in deine Sprache.

Interessiert an der Entwicklung?

Durchstöbere den Code, sieh dir das SVN Repository an oder abonniere das Entwicklungsprotokoll per RSS.

Änderungsprotokoll

0.10

  • Fehler behoben, der beim öffnen der Seite im Backend auftritt. (Danke an andrewleonard)

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