Egal ob du ein Forscher bist, der Daten über eine lokale Wahl zusammenstellt oder ein Lehrer, der Daten über die lokale Wildtierpopulation mit seiner Klasse teilt, es gibt keinen besseren Ersatz als Diagramme und Grafiken. Diese visuellen Tools verwandeln langweilige, scheinbar wertlose Daten in leicht verständliche Informationen.
Das Tolle ist, dass du dich nicht mit einer komplexen Software zur Erstellung von Diagrammen herumschlagen musst, da WordPress Diagramme und Charts mit einfachen Plugins erstellt werden können. Deshalb wollen wir dir hier zeigen, welche Plugins die besten sind und wie du schöne WordPress Diagramme und Graphen erstellen kannst.
Vorteile der Erstellung von Diagrammen und Graphen in WordPress
Du fragst dich vielleicht, warum du nicht einfach eine Grafik oder ein Diagramm in, sagen wir, Excel entwickeln und dann einen Screenshot davon machen kannst, um ihn in deinem Blogpost zu platzieren. Manchmal funktioniert diese Methode gut, aber manchmal ist es eine große Verschwendung. Der Hauptgrund, warum du Excel oder ein anderes Diagrammerstellungsprogramm verwenden solltest, ist, wenn du eine fortgeschrittene Funktion brauchst, die nicht durch ein WordPress Plugin verfügbar ist.
Ansonsten sind hier die Vorteile der Erstellung von WordPress Diagrammen und Graphen mit Plugins:
- Es konsolidiert all deine Diagrammerstellung in einem Bereich. Wenn du regelmäßig Graphen oder Diagramme erstellst, spart dir das eine Menge Zeit.
- Es erlaubt dir, zurück zu gehen und das Diagramm zu bearbeiten, falls nötig. Ein Bild schränkt schnelle Korrekturen ein und erfordert, dass du die alte Datei findest, mit der du das Diagramm erstellt hast.
- Einige Diagramme und Grafiken haben interaktive Funktionen, die mit einem Bild niemals möglich wären.
Insgesamt vereinfacht ein WordPress Diagramm Plugin den Prozess, aber es bietet dir trotzdem die meisten Funktionen, die du für deine Blogbeiträge brauchst.
5 effektive WordPress Diagramme und Graphen Plugins im Jahr 2019
Bevor wir mit einem Tutorial beginnen, wie man schöne WordPress Diagramme und Graphen erstellt, wollen wir die besten Plugins durchgehen, um zu erreichen, was du brauchst.
- wpDataTables
- WordPress Charts und Graphs Lite
- WordPress Diagramme
- Interaktive Karten, Diagramme, Graphen
- UberChart
1. wpDataTables
wpDataTables ist ein sehr robustes WordPress Plugin! Lass dich nicht vom Namen täuschen. Es kann viel mehr als nur deine typischen Tabellen erstellen. Du kannst auch alle Arten von Diagrammen und Graphen erstellen. Es wurde speziell dafür entwickelt, dass du große Datenmengen eingeben kannst und diese schnell in eine schöne grafische Darstellung für deine Leser verwandeln kannst.
wpDataTables ist ein Premium Plugin, beginnend bei $44 für eine Lizenz. Es hat derzeit über 13.000 Verkäufe auf CodeCanyon mit 4,5 von 5 Sternen, du kannst dir also sicher sein, dass es von vielen Leuten gerne genutzt wird. Einige der Funktionen sind:
- Alles ist responsive, d.h. sie skalieren schön für jedes Gerät
- Das wpDataTables Plugin hat drei verschiedene Diagramm-Rendering-Engines: Google Charts, Highcharts und Chart.js. Dies ermöglicht es dir, einfache und flexible Diagramme mit vielen anpassbaren Optionen zu erstellen
- Auto-Refresh in Echtzeit für Tabellen und Charts
- Vorschau deiner Charts im Backend zusammen mit der Tabelle
2. WordPress Charts und Graphs Lite
Wenn du Daten und Informationen in deinem WordPress Blog mit schönen Diagrammen und Grafiken darstellen möchtest, dann ist das WordPress Charts and Graphs Lite Plugin genau das Richtige für dich. Es leistet wunderbare Arbeit bei der Erstellung schöner und interaktiver Grafiken, während es dir die totale Freiheit gibt, die Ausgabe so anzupassen, dass sie genau deinen Anforderungen entspricht: Du kannst Farben ändern, Schriftarten anpassen, Text ausblenden, Text hinzufügen – all das sogar nachdem das Diagramm veröffentlicht wurde. Die Anzeige von Diagrammen in deinen Beiträgen und Seiten ist so einfach wie das Hochladen einer Tabelle und das Hinzufügen des Shortcodes, den das Plugin automatisch generiert, zu deiner Seite.
Wenn du dich später entscheidest, die Art des Diagramms zu ändern, z.B. von einem Blockdiagramm zu einem Tortendiagramm, klickst du einfach auf den Bearbeiten-Button und stellst es um. Ja, es ist wirklich so einfach. Es ist auch erwähnenswert, dass die Diagramme und Graphen, die es erstellt, auf allen Bildschirmen (Desktops, Tablets, Handys) in allen Größen funktionieren, da das Plugin responsive ist.
Es beinhaltet neun Diagrammtypen, Shortcode Support und die Möglichkeit, viele Daten per CSV zu importieren. Dieses Diagramm Plugin wird auch als Visualizer Plugin bezeichnet, daher wirst du es vielleicht auch so sehen. Es gibt sowohl eine kostenlose als auch eine Vorteils-Version. Die Pro Version kostet mindestens $74 (eine Webseite Lizenz) und es bietet Tools für den Import von anderen Charts. Einige andere Vorteile der Pro Version sind:
- Die Option, Benutzern Bearbeitungsmöglichkeiten zu geben
- Private Diagrammerstellung
- Auto-Synchronisation mit deiner Online-Datei
- Zusätzliche Diagrammtypen
- Du erhältst Zugang zu einem Live-Editor
Das Lite Plugin ist immer noch ziemlich mächtig. Hier sind einige der Diagramme, die du erstellen kannst:
- Liniendiagramm
- Kreisdiagramm
- Balkendiagramm
- Säulendiagramm
- Flächendiagramm
- Geodiagramm
- Tabellendiagramm
- Guage chart
- Candlestick-Diagramm
- Combo-Diagramm
- Punktediagramm
- Zeitleisten-Diagramm
3. WordPress Diagramme
Das WordPress Charts Plugin wäre meine dritte Wahl, viele Nutzer mögen es für die sauberen Designs, Animationen und bunten Optionen. Beachte aber auch, dass es schon lange nicht mehr aktualisiert wurde.
Das WordPress Diagramm Plugin bietet sechs einzigartige Diagramm- und Grafik-Templates, die du anpassen und deine eigenen Daten einfügen kannst, um sie auf deiner Webseite anzuzeigen. Zu den angebotenen Diagrammen gehören:
- Linie
- Bar
- Kuchen
- Radar
- Polare Fläche
- Doughnut Typen
Alle diese Diagramme sind mit HTML5 erstellt. Die Anpassungsmöglichkeiten sind schier endlos, aber du musst ein wenig über Codierung, Shortcodes oder zumindest die Anpassung der Standardeinstellungen wissen. Der Grund, warum wir dieses WordPress Diagramm Plugin so sehr mögen, ist, dass es extrem leichtgewichtig ist. Du könntest Dutzende von Diagrammen in all deinen Blogbeiträgen einfügen und hättest kein Problem. Und das ist der ganze Sinn der Arbeit mit HTML5. Du kannst das Durcheinander entfernen, ohne die Funktionalität zu opfern.
4. Interaktive Karten, Diagramme, Graphen – Für VC
Wenn du das Visual Composer Plugin auf deiner Webseite verwendest, könnte das Interactive Maps, Charts, Graphs Plugin etwas für dich sein. Es ist ein Add-on zum Visual Composer, also gibt es keinen Grund, es anders zu erwerben.
Das Add-on kostet $12 und bietet interaktive Karten, Diagramme und Graphen, die alle in die Visual Composer Oberfläche integriert sind. Das Add-on kommt mit Vektorsymbolen, Google Fonts, unbegrenzten Farben und einem breiten Set an anderen Funktionen, um deine Diagramme und Graphen zu erstellen und anzupassen. Das Add-on verfügt über die Standard-Diagramme und -Grafiken, wie z.B. Torten- und Liniendiagramme. Es gibt auch eine einzigartige Kartenfunktion, um bestimmte Bereiche hervorzuheben, egal ob es sich um eine lokale Karte oder eine der Welt handelt.
5. UberChart – WordPress Chart Plugin
UberChart ist ein vielseitigeres Premium Chart Plugin, da es nicht das Visual Composer Plugin benötigt. Das Plugin bietet 10 eingebaute Diagrammtypen, für die du rund 240 anpassbare Optionen pro Diagramm erhältst.
Du kannst Daten mit einem Klick exportieren und importieren, und das responsive Design sorgt dafür, dass alle deine Diagramme auf jedem Gerät angezeigt werden. Einige der Diagrammtypen sind:
- Liniendiagramme
- Flächendiagramme
- Balkendiagramme
- Kreisdiagramme
- Doughnut-Diagramme
- Blasendiagramme
Der beeindruckendste Teil dieses WordPress Diagramm Plugins ist der Tabelleneditor. Es erlaubt dir, Daten aus einem beliebigen Programm zu kopieren (z.B. Excel) und vereint so die fortgeschrittenen Funktionen von Excel mit der Vielseitigkeit eines Diagramm-Plugins.
Wie man schöne WordPress Charts und Diagramme erstellt
Eines unserer Lieblings-Plugins für Diagramme ist WordPress Charts and Graphs Lite. Daher werden wir dieses Tutorial nur mit diesem Plugin durchgehen. Die anderen Diagramm Plugins haben ähnliche Tools, aber unterschiedliche Interfaces. Daher empfehle ich dir, alle auszuprobieren, um herauszufinden, welches das Richtige für dich ist, denn auch wpDataTables ist sehr robust!
Schritt 1: Installiere und aktiviere das WordPress Charts and Graphs Lite Plugin
Das ist ganz einfach.
Schritt 2: Gehe zur Visualizer Library und füge einen neuen Graphen hinzu
Wie wir oben kurz erwähnt haben, wird das WordPress Charts and Graphs Lite Plugin auch als Visualizer bezeichnet. Es ist etwas schwierig, die Einstellungsseite zu finden, aber alles, was du tun musst, ist auf Media > Visualizer Library zu gehen. Es gibt keine weiteren Einstellungen, die du konfigurieren musst, bevor du mit deinen WordPress Charts loslegen kannst.
Wenn du auf der Visualizer Library landest, siehst du eine Nachricht, die besagt „Keine Charts gefunden“. Das ist völlig in Ordnung, da wir noch keine Diagramme erstellt haben. Deshalb solltest du auf den Add New Button oben auf der Seite klicken.
Hier siehst du alle WordPress Diagramme und Graphen, die du mit dem Plugin erstellen kannst. Zum Beispiel hat es Torten-, Linien-, Flächen-, Geo- und Balkendiagramme. Neun WordPress-Diagramme sind in der kostenlosen Version enthalten. Drei weitere Diagramme erhältst du, wenn du für die Vorteilsversion zahlst. Wie auch immer, ich werde für dieses Tutorial ein Tortendiagramm auswählen.
Schritt 3: Daten in das WordPress-Diagramm importieren
Das Plugin fügt automatisch Daten ein, damit dein Diagramm etwas zum Anzeigen hat. Um jedoch deine eigenen Daten zu präsentieren, musst du sie mit einer von fünf Methoden importieren. Du kannst:
- Daten aus einer Datei importieren (wahrscheinlich die häufigste Methode)
- Daten von einer URL importieren
- Import aus einer anderen Tabelle
- Import aus WordPress (nur in der Pro Version verfügbar)
- Daten manuell importieren (nur in der Pro Version verfügbar)
In diesem Beispiel importiere ich Daten aus einer CSV-Datei. Ursprünglich war es eine Excel-Datei, was eine der gängigsten Methoden ist, um Daten in ein WordPress-Diagramm oder eine Grafik zu bekommen. Wenn du Daten aus einer Datei importierst, klicke auf den Button Datei auswählen, suche die Datei auf deinem Computer und klicke dann auf den Button Importieren in deinem WordPress Dashboard.
Dies sollte dir eine Vorschau zeigen, wie deine Daten auf der linken Seite aussehen werden. Die gute Nachricht ist, dass du jederzeit zurückgehen kannst, um die Formatierung deiner CSV-Datei anzupassen und es erneut zu versuchen. Außerdem gibt es im nächsten Schritt jede Menge Tools zum Anpassen, damit alles noch ein bisschen besser aussieht.
Schritt 4: Passe dein WordPress Diagramm an
Es gibt einen kleinen Link, der „Erweitert“ sagt, unterhalb aller Importoptionen. Klicke darauf, um deine Anpassungseinstellungen zu sehen. Es gibt eine ganze Reihe von Optionen, mit denen du herumspielen kannst, daher werden wir hier nicht alle durchgehen.
Aber wir können mit dem Diagrammtitel beginnen. Ich werde etwas wie „Where Does Your Time Go?“ eingeben, da mein Diagramm den prozentualen Anteil der Zeit aufzeigt, den die Leute für bestimmte Aufgaben am Tag aufwenden. Ich kann auch die Schriftart, die Schriftgröße, die Farbe und die Position des Titels ändern.
Wenn du dich durch die Einstellungen bewegst, wirst du mehrere Tabs für Dinge wie allgemeine Einstellungen, Slice-Einstellungen, Frontend-Aktionen und mehr sehen. Du wirst höchstwahrscheinlich entscheiden wollen, wo die Legende platziert werden soll, da sie ein wesentlicher Teil des Diagramms ist.
Ansonsten hängt es ganz davon ab, welche Art von Diagramm du erstellen willst und welche Elemente du anzeigen möchtest. Ich werde so tun, als wäre dies ein WordPress-Diagramm für eine Gruppe von Schülern, die ich habe. Deshalb möchte ich ihnen die Möglichkeit geben, die Daten und das Diagramm zu drucken und herunterzuladen.
Um dies zu tun, gehe auf den Reiter Frontend-Aktionen. Hier findest du Checkboxen, mit denen du den Benutzern das Drucken und Kopieren der Daten ermöglichen kannst. Du kannst ihnen auch herunterladbare Excel-Sheets und CSVs zur Verfügung stellen. Sobald du mit der Anpassung deines Diagramms fertig bist, stelle sicher, dass du es speicherst.
Schritt 5: Kopiere den Shortcode in eine Seite oder einen Beitrag
Nach dem Speichern deines WordPress Diagramms oder Graphen, navigiere zurück zur Visualizer Bibliothek. Du wirst eine Liste deiner Diagramme sehen und kannst nach den Diagrammtypen filtern. Da ich im Moment nur ein Diagramm habe, kann ich es sofort als einzige Option sehen. Um dein WordPress-Diagramm auf einer Seite oder in einem Beitrag zu veröffentlichen, musst du den Shortcode des Diagramms kopieren und es in die gewünschte Seite oder den Beitrag einfügen. Der Shortcode befindet sich unter der Diagrammvorschau (siehe Screenshot unten).
Sobald du den Shortcode kopiert hast, erstelle entweder eine Seite oder einen Beitrag oder gehe zu einem, der bereits veröffentlicht ist. Finde die Stelle, an der du den Graphen haben möchtest und füge den Shortcode ein.
Schritt 6: Betrachte den WordPress Graph im Frontend
Ich empfehle dir eine Vorschau deines Graphen, bevor du den Veröffentlichen-Button drückst. Auf diese Weise weißt du, was deine Nutzer zu sehen bekommen, vor allem, weil WordPress Diagramme und Graphen ziemlich pingelig sein können. Wenn du einen Blick auf den Screenshot unten wirfst, siehst du eine Vorschau meiner Testgrafik im Frontend einer Webseite. Die Druck- und Download-Buttons sind sichtbar, das WordPress-Diagramm hat einige nette Animationen, wenn du darüber scrollst, und die Farben und Titelelemente sehen gut aus.
Die Änderungen werden sofort in einer Live-Vorschau angezeigt, sodass du sehen kannst, wie sie sich auf den Graphen auswirken, ohne die Seite speichern und in einem neuen Tab anzeigen zu müssen. Es gibt noch eine weitere Funktion, die erwähnenswert ist, und die ist ziemlich genial. Du kannst nicht nur die Styling-Optionen eines Diagramms bearbeiten, sondern auch die Daten innerhalb der Diagramme, indem du eine andere Datei hochlädst, das Original überschreibst und die alten Daten durch die neuen ersetzt.
Fragen zur Erstellung von WordPress Diagrammen?
Alle WordPress Charts und Diagramme haben ihre unterschiedlichen Funktionen. Das Coole an diesen Plugins ist, dass du alle Flexibilität der Welt hast. Daher ermutige ich dich, Zeit damit zu verbringen, deine Diagramme zu testen und zu verstehen, was jede Einstellungsanpassung bewirkt. Dann wirst du irgendwann zum Diagramm-Meister, und die Leute werden dich fragen, wie du es machst. Wenn du Fragen oder Gedanken zur Erstellung von WordPress Diagrammen und Graphen hast, schreibe mir unten in die Kommentare.
Brian hat eine große Leidenschaft für WordPress, verwendet es seit über einem Jahrzehnt und entwickelt sogar einige Premium-Plugins. Brian liebt Blogging, Filme und Wandern. Verbinde dich mit Brian auf Twitter.
Schreibe einen Kommentar