Wie erstellt man Diagramme in Drupal mit den Modulen Charts und Charts Twig?
In diesem Blogbeitrag werde ich teilen, wie Sie einfach und schnell Diagramme in Drupal mit den Charts- und Charts-Twig-Modulen erstellen können. Diese Anleitung wird besonders nützlich für Verlage sein, aber auch für jeden, der eine ähnliche Funktion in seinem CMS haben möchte. Ich lade Sie ein, den Artikel zu lesen oder sich eine Episode der Nowoczesny Drupal-Reihe anzusehen, in der jede Aktivität Schritt für Schritt gezeigt wird (das Video ist auf Polnisch).
Installation der Charts- und Charts-Twig-Module
Um in Drupal Diagramme zu erstellen, benötigen wir nur ein Modul. Wir müssen keine zusätzlichen Bibliotheken installieren, um diese Diagramme anzuzeigen. Alles, was wir benötigen, ist das Charts-Modul. Es kann weiter mit dem Charts-Twig-Modul erweitert werden.
Die Installation ist einfach und unterscheidet sich nicht von anderen Drupal-Modulen. Sie müssen nur das Charts- oder Charts-Twig-Modul herunterladen, wenn Sie Twig für unsere Diagramme verwenden möchten, und es auf unserer Website installieren.
Wenn wir das Modul in das Modules Contrib-Verzeichnis herunterladen, erscheint es in der Liste aller Module.
Und hier, wie Sie sehen können, habe ich bereits Charts-Module und andere Untermodule installiert, die Bibliotheken für uns hinzufügen, um gegebene Diagramme anzuzeigen. Beliebte Bibliotheken wie HighCharts, Chart.js und Google Charts sind ebenfalls verfügbar.
Im weiteren Verlauf dieses Artikels werde ich die Konfiguration der betreffenden Diagramme zeigen und vor allem, wie solche Diagramme in einer CMS-Lösung wie Drupal erstellt werden.
Vier Methoden zur Anzeige von Diagrammen mit dem Charts-Modul
Mit den Charts- und Charts-Twig-Modulen können wir Diagramme auf vier Arten anzeigen.
Der erste und beliebteste Weg ist, ein solches Diagramm mit dem Ansichtsmodul zu generieren.
Der zweite Weg besteht darin, einen speziell zu diesem Zweck erstellten Block mit dem Charts-Modul einzufügen. Dort fügen Sie manuell die Daten hinzu, die Sie auf der X- oder Y-Achse haben möchten. Dadurch erscheint dieses Diagramm.
Methode 3. Feld in einer Entität
Der dritte Weg ist, ein Feld zu einer Entität hinzuzufügen, wie z.B. Inhaltstyp. Dieses Feld hat auch die Möglichkeit, manuell die Daten einzufügen, die auf den Diagrammachsen erscheinen sollen. Wir können diese Daten auch aus einer CSV-Datei mit der Upload-Option hochladen.
Der vierte Weg, der durch das Charts-Twig-Modul bereitgestellt wird, ist, ein Diagramm mithilfe des PHP-Codes, Twig, zu generieren. Wir können in einigen Vorverarbeitungen die Daten, beispielsweise von einer API, abrufen, sie in Twig einfügen und auf dem Diagramm anzeigen.
Von diesen vier Wegen können wir in Views, also dem Views-Modul, und in Charts Twig (also PHP, Daten von einer API) die Daten dynamisch anzeigen, während bei einem Block oder Feld die Daten statisch, manuell bereitgestellt werden. Und wenn sie einmal bereitgestellt sind, "sitzen" sie dort.
Konfiguration des Charts-Moduls in Drupal
Wie sieht die Konfiguration des Charts-Moduls aus? Sie ist unkompliziert. Wir gehen auf den Erweitern-Reiter. Wenn wir nicht wissen, welchen Link wir verwenden sollen, um ein bestimmtes Modul zu konfigurieren, wählen wir in diesem Fall Charts aus, und hier gibt es einen solchen Konfigurieren-Button.
Und hier können Sie entweder Standard- oder erweiterte Werte für alle neu erstellten Diagramme einstellen.
Angenommen, ich möchte, dass es HighCharts ist und dass die Grafiken immer linear sind. Es ist zu beachten, dass dies keine starren Einstellungen sind. Jede der Möglichkeiten zur Anzeige von Diagrammen, d.h. die oben genannten Ansichten, Block, Feld oder Charts Twig, kann natürlich diese Einstellungen ändern.
Wie erstelle ich ein Diagramm im Charts-Modul?
Ich werde jetzt vier Wege zeigen, um ein Diagramm in Drupal hinzuzufügen.
Methode 1. Erstellen eines Diagramms mit Aktienkursen mit Views
Ich habe mir einen Inhaltstyp vorbereitet - Aktienkurs. Er hat keinen Bezug zu tatsächlichen Aktienkursen, aber die Idee ist, zu sehen, wie sich der Aktienkurs im Laufe der Zeit in diesem Fall ändert, und ihn auf einem Diagramm darzustellen.
Wie sieht dieser Inhaltstyp aus? Die Struktur des Inhaltstyps ist Aktienkurs. Gehen Sie zum Felder verwalten-Abschnitt.
Hier haben wir Aktien-Datum - das Datum wird auf der X-Achse angezeigt, und Aktienkurs - die Änderung dieses Kurses wird auf der Y-Achse angezeigt. Alles das wird solch ein cooles Diagramm des Kurses im Laufe der Zeit erstellen. Wie macht man es am einfachsten? Einfach durch die Verwendung der Ansicht.
Structure -> Ansichten -> Neue Ansicht hinzufügen
Ich füge eine neue Ansicht hinzu. Ich werde sie Aktienkurs nennen. Sie erstellt einige Seiten mit der Aktienkurs-Adresse. Ich speichere und ändere die Einstellungen für mich selbst so, dass sie mir beispielsweise Felder anzeigt. Im Moment wird es einen Standard-Titel hinzufügen.
Ich möchte den Preis und das Datum anzeigen, was bedeutet, dass ich diese beiden Felder hinzufüge, die nur in diesem Inhaltstyp vorhanden sind.
In diesem Punkt wurden mir alle Inhalte angezeigt. Ich muss einen Filter hinzufügen - Inhaltstyp. Ich wähle Aktienkurs und klicke Anwenden. Alle Aktienkurse wurden mir hier angezeigt. Ich möchte den Titel nicht, da ich ihn nicht im Diagramm haben möchte, also habe ich dieses Feld einfach gelöscht. Und damit habe ich alle Daten, die ich brauche, d.h. das Datum und den Preis.
Ich werde es noch nach Datum sortieren. Im Sortierkriterium füge ich Aktien-Datum hinzu, wähle Absteigend sortieren und klicke Anwenden. Den anderen Filter, d.h. das Hinzufügungsdatum, werde ich entfernen, ich brauche ihn in diesem Fall nicht. Ich werde diese Daten speichern.
Ich sehe, dass es ein Datum vom neuesten bis zum frühesten gibt, zusammen mit dem Kurs der betreffenden Aktien.
Und nun, wie man es auf einem Diagramm anzeigt? Sehr einfach. Ich ändere das Format von Unformatierte Liste in Diagramm, gebe Anwenden und dann habe ich alle Einstellungen, die oben in den allgemeinen Einstellungen sichtbar sind, d.h., Highcharts, Linie, usw.
Ich stelle ein, welches Feld die Daten liefern soll - Aktienkurs. Danach habe ich Einstellungen, die sich auf die X- und Y-Achsen und Beschriftungen beziehen. Ich lasse es wie es ist, wende an, und ein Diagramm zeigt das Datum und den Preis dieser Aktie. Sie können auch sehen, wie es sich über die Zeit verändert - es gibt einen Abwärtstrend.
Wie sehen die anderen Diagramme aus? Sie können es in den Einstellungen austesten. Sie können auch eine Bar wählen, z.B. ein Balkendiagramm.
Es ist weniger sichtbar, wenn es um Aktien geht, aber Sie können mit verschiedenen Arten von Diagrammen experimentieren. Im Fall von Charts.js ist die Linie etwas dicker. Sie können ein solches Diagramm sehr schnell generieren.
Methode 2. Anzeige des Diagramms in Drupal mit dem Block
Der zweite Weg, wie Sie Diagramme anzeigen können, ist mit einem Block. Wie macht man das? Auf sehr einfache Weise. Sie müssen den entsprechenden Block erstellen.
Struktur -> Block Layout
In diesem Abschnitt müssen wir zum Beispiel etwas wie Charts-Block im Block einfügen-Inhalt auswählen.
Dies ist die Art von Block, die gerade vom Charts-Modul bereitgestellt wird. Einfach Block einfügen machen und weiterhin finden wir die gleichen Einstellungen, d.h. den Datentyp der Diagramme (sagen wir linear) und manuell können wir eingeben, was auf der X-Achse und was auf der Y-Achse ist.
Ich gebe Daten 5, 3, 8, 4, 13 ein, so dass es aufsteigend ist. Ich werde mich auch auf einen gegebenen Block beschränken, dass er mir nur auf der Hauptseite erscheint, ich speichere und es ist im Inhalt. Ich verschiebe es ganz nach oben – der Block wird korrekt angezeigt. Sie können die X-Achse und die Y-Achse zusammen mit den Werten sehen - aufsteigend, was der Weg ist, den wir wollten.
Methode 3. Erzeugung von Drupal-Diagrammen mit Feldern
Der dritte Weg ist, ein Feld zu erstellen, zum Beispiel im Inhaltstyp.
Wie macht man das? Sehr einfach. Zuerst müssen wir einen Inhaltstyp haben, für den wir das Feld hinzufügen möchten. Ich werde es zu einigen bestehenden Inhaltstypen hinzufügen. Es wird ein Artikel sein.
Struktur -> Inhaltstypen -> Artikel
Ich gehe in die Felder verwalten-Operation und ich muss ein neues Feld hinzufügen, das dieses Diagramm für mich anzeigen wird. Ich klicke Neues Feld erstellen, wähle das Diagramm, dann klicke Fortfahren. Ich muss mir dieses Diagramm selbst benennen - field_charts - und ich speichere die Einstellungen. Damit ist dieses Feld bereits hinzugefügt und alles, was ich jetzt tun muss, ist, einen Artikel hinzuzufügen.
Erstellen -> Artikel
Wir haben bereits das Diagramm-Feld.
Auf die gleiche Weise, wie es im Fall von Blöcken war, wählen wir auch den Typ eines gegebenen Diagramms und fügen manuell Daten ein. Hier (wie im Block) gibt es auch die Möglichkeit, eine CSV-Datei genau mit den Daten zu importieren, basierend auf denen ein gegebenes Diagramm angezeigt wird.
Methode 4. Erstellen eines Diagramms in Drupal mit Charts Twig
Der vierte Weg, ein Diagramm anzuzeigen, ist die Verwendung von Charts Twig. Dazu müssen wir das Charts-Twig-Modul installiert haben. Ich habe es bereits.
Ich habe auch bereits ein benutzerdefiniertes Modul erstellt, das den Block für mich anzeigen wird. Ich werde Charts Twig darin laden mit dynamisch hinzugefügten Daten, die auf diesem Diagramm erscheinen werden.
Ich werde jetzt zu PhpStorm übergehen, wo ich ein benutzerdefiniertes DCharts-Modul erstellt habe. Sie können ein solches Modul mit Drush generieren oder es manuell hinzufügen. Dies ist ein sehr einfaches Modul, das nur einen Block für mich erstellt.
Hier gibt es eine Klasse für den Block und build, das eine Methode ist, die bestimmt, wie der Block aufgebaut werden soll. Sie gibt hier einfach die Information an, dass der gesamte Inhalt in der Twig-Datei - sample_chart - und immer noch benutzerdefinierte Daten, Datum und X-Achse übermittelt werden. Es gibt Beispieldaten "10, 20, 30" von der Y-Achse und Labels, die auf der X-Achse sein werden.
Wie sieht es von der Charts-Twig-Seite aus? Es ist sehr einfach. Ich setze den Titel, ich setze die Serie, das ist die Variable, die in diese Charts-Funktion geladen wird.
Die Charts-Funktion ist in Twig nur nach der Installation des Charts-Twig-Moduls verfügbar.
Die Datum-Variable ist eine der wichtigsten, weil sie die sehr dynamischen Daten bestimmt, die von PHP geladen werden können. Sie kommt von SampleChartBlock. Hier ist sie fest kodiert "10, 20, 30", aber Sie können sehen, dass es die Möglichkeit gibt, diese Daten dynamisch mit einer API zu laden, zum Beispiel. Laden Sie die Daten von der API herunter und zeigen Sie sie hier an.
In Sample-chart.html.twig gibt es bereits eine Auslösung dieser Funktion selbst. Sie können den Namen dieses Diagramms sehen, seinen Typ, die Serie und die Daten auf der X-Achse und den Titel.
Tatsächlich ist dies genug. Damit ist bereits ein Block verfügbar, der uns diese Daten anzeigen wird.
Um diesen Block anzuzeigen, müssen Sie also natürlich zur Blocklayout-Seite gehen und den Block irgendwo im Inhalt platzieren. Er heißt SampleCharts. Dies ist der gleiche Name, der in PhpStorm im Namen dieses Blocks verwendet wurde.
Ich klicke Block platzieren. Es gibt hier keine Konfiguration, weil die Daten von PHP kommen. Ich speichere die Konfiguration. Das Diagramm wird wahrscheinlich überall jetzt erscheinen, weil ich keine Einschränkungen angegeben habe.
Es gibt SampleCharts - das ist der Blocktitel. The Chart Title sind die Daten, die gerade von Twig kommen. Auf der X-Achse haben wir die "A, B, C"-Daten und auf der Y-Achse haben wir die Daten, die ich dort eingegeben habe, nämlich "10, 20 und 30".
Zusätzliche Beispiele für Diagramme
Ich werde auch einige Diagramme präsentieren, die im echten Leben dargestellt werden, z.B. auf Seiten für Verlage.
Ich habe bereits solche Ansichten vorbereitet, die präsentieren:
- Die Anzahl der täglich hinzugefügten Artikel,
- Die Anzahl der täglich hinzugefügten Artikel nach Kategorie,
- Die Anzahl der täglich hinzugefügten Artikel nach Autor.
Diese Diagramme spiegeln die Realität für Verlage und Redakteure wider, die wissen möchten, wie der Fortschritt bei der Erstellung von Inhalten durch bestimmte Autoren oder in bestimmten Kategorien verläuft.
Sie können auch genau sehen, wie und was hinzugefügt wird. Zum Beispiel nach Kategorie - Sie können sehen, dass der 24. Juni ein starker Schuss war, wenn es um Artikel zu Drupal geht:
Natürlich können Sie diese Kategorie auch für sich ändern, z.B. in Sicherheit, und dann können Sie sehen, wie die Artikel nur in dieser Kategorie verteilt wurden.
Die von den Autoren angezeigten Diagramme funktionieren nach einem ähnlichen Prinzip. Wir können sehen, welche Autoren und welche Art von Auslastung sie beim Erstellen und Veröffentlichen von Artikeln haben.
Wie sehen diese Ansichten aus? Sie sind etwas komplizierter als diese Aktienkursansicht. Ich werde es anhand des ersten Diagramms als Beispiel zeigen.
Auf der X-Achse ist natürlich das Erstellungsdatum eines gegebenen Artikels, d.h. es gibt Erstellten Inhalt. Der zweite Wert zählt dagegen die Anzahl der Artikel an einem gegebenen Tag. In diesem Fall wird das Inhalt: ID-Feld verwendet, aber Sie können auch das Inhalt: Titel-Feld verwenden, weil hier einfach dieses Feld verwendet wird, um die Anzahl zu zählen.
In diesem Fall wird die Zähl-Funktion oder Zählung immer noch verwendet, und daneben sind die Aggregierungseinstellungen. Der Aggregationstyp hat die Übersetzung Nummer, aber dies ist einfach eine Zählung.
Aggregationsfunktionen sind verfügbar, wenn der Aggregat-Schalter aktiviert ist.
Auf diese Weise können wir die Mengen an gegebenem Inhalt zählen. Sie erscheinen einfach auf dem Diagramm.
Wie würde es ohne das Diagramm aussehen? Ich wähle Unformatierte Liste.
Dann sehen Sie einfach die Zahlen, die für einen gegebenen Artikel hochgezählt werden - am 2. Juli gab es einen Artikel, am 1. Juli - zwölf und so weiter. Dieses Zählen ist möglich, wenn die Aggregation aktiviert ist. Ich werde jetzt zu den älteren Einstellungen mit dem Diagramm zurückkehren.
Hier können Sie sehen, welche Daten Sie auf der Y-Achse anzeigen möchten - dies ist die ID-Zählung, die die Anzahl dieser Artikel ist.
Und hier können Sie sehen, wie sich diese Art von Diagramm verändert hat:
Es ist so weniger benutzerfreundlich, hat aber auch eine gewisse Datenreflexion.
Die anderen Diagramme, nämlich die Anzahl der Artikel nach Kategorie und die Anzahl der von einem bestimmten Autor geschriebenen Artikel, sind auf nahezu die gleiche Weise erstellt. Damit können Sie sehen, wie wir einfach die verschiedenen Daten anzeigen können, die auf reale Websites angewendet werden können.
Drupal-Diagramme mit Modulen - Zusammenfassung
Dank dieses Artikels wissen Sie jetzt alle vier möglichen Wege, um ein Diagramm zu Ihrer Drupal-Website hinzuzufügen - mit dem Ansichtsmodul, Block, Feld in der Entität und Charts-Twig-Modul. Wenn Sie Unterstützung bei der Einrichtung von Diagrammen oder einer anderen Art von technischer Arbeit benötigen, haben wir einen CMS-Entwicklungsservice für Verlage, und wir können Ihnen helfen.
