Reaktionsschnelle Echtzeitdiagramme in WordPress: Plugins und Plotten

Key Takeaways

• Die Flot-Bibliothek ist ein effektives Werkzeug zum Erstellen reaktionsschneller Echtzeitdiagramme in einer WordPress-Site. Es ist einfach zu implementieren und funktioniert auf allen Geräten.
• Ein Pushups -Trackerformular und eine Datenbanktabelle können verwendet werden, um Daten in den Grafiken zu füllen. Sobald dieses System vorhanden ist, kann jede Art von draphierten Daten erstellt werden.
• Der Flot für WordPress -Plugin kann verwendet werden, um die Flot -Bibliothek in WordPress zu registrieren und auszuführen. Die Bibliothek kann jedoch auch ohne Plugin implementiert werden.
• Echtzeit-Diagramme erstellen, beinhaltet mehrere Schritte, darunter das Abrufen der Flot-Bibliothek, das Erstellen von Pushups-Ergebnissen und das Erstellen des Diagramms. Es ist wichtig zu verstehen, wie Flot die Daten interpretiert und sich nicht nur auf das Kopieren und Einfügen des Code

In diesem Teil unserer Serie zum Erstellen von reaktionsschnellen Echtzeitdiagramme innerhalb einer WordPress-Site werden wir endlich zu den guten Sachen kommen! Die letzten drei Teile dienen dazu, die neueren Designer auf den neuesten Stand zu bringen. Wenn Sie gerade ankommen, zu schnell vorwärts übersprungen oder unauslöschlich verwirrt sind, kehren Sie zu den früheren Teilen zurück und überprüfen Sie ein wenig. Ein Teil des Codes ist für dieses Projekt ziemlich spezifisch, z. Ich habe ein einfaches Pushups -Trackerformular und eine Datenbanktabelle für die Verwendung mit unseren Flot -Diagrammen erstellt. Natürlich können Sie nahezu jede Datenquelle verwenden, um die Daten auf Ihren Seiten zu füllen. Um einem Neuling zu unterrichten, wie man mit Formularen und Phpmyadmin anfängt, wollte ich den gesamten Prozess von Grund auf den gesamten Prozess durchgehen. Sobald Sie dieses System auf Ihrer WordPress -Site vorhanden haben, können Sie buchstäblich alle Arten von drapischen Daten erstellen. Die Flotgrafikbibliothek ist umfangreich und sehr einfach zu implementieren. Wie ich demonstrieren kann, können Sie mit unserem Pushups-Tracker ausspülen und wiederholen und ein leistungsstarkes System zum Anzeigen dieser Daten erstellen-alles in Echtzeit auf einer reaktionsschnellen Website.

Schritt 1: Holen Sie sich die Flot -Bibliothek

Ich benutze Flot für meine Grafiken aus vielen Gründen, aber vor allem, weil es einfach zu implementieren ist und ich es dazu bringen konnte, auf jedem vorstellbaren Gerät zu arbeiten. Es verwendet die Canvas -Funktion in HTML5, um Daten zu zeichnen, und ist in der Lage, verrückte, erstaunliche Sachen. Sie können alles verwenden, was Sie wollen. Aber für dieses Tutorial werden wir Flot verwenden. Insbesondere verwenden wir mein Plugin (Flot für WordPress), um die Flot -Bibliothek in WordPress ordnungsgemäß zu registrieren und auszuführen. Ich empfehle dringend, das Plugin zu verwenden, aber Sie können Flott ohne ihn implementieren. Flot für WordPress -Plugin

Schritt 2: Machen Sie die Liegestütze -Ergebnisse nach

Gehen Sie in WordPress zu "Post" S> "Neue" und erstellen Sie einen Beitrag mit dem Titel "Pushups -Ergebnisse". Stellen Sie im Körper den folgenden Shortcode ein:

[pushups_results_sc]

Veröffentlichen Sie den Beitrag und Sie sind fertig. Derzeit zeigt der Post -Inhalt den genauen Text „[Pushups_Results_Sc]“ an, da wir die Funktion für den Shortcode noch nicht erstellt haben.

Schritt 3: Erstellen Sie unser Graph

In Teil 2 dieser Serie haben wir eine neue Tabelle in unserer WordPress -Datenbank namens Pushups erstellt. Wir verwenden es, um die Liegestützinformationen aus unseren Formularen zu speichern. Wenn Sie mit PhpMyAdmin wirklich vertraut sind, gehen Sie zur Registerkarte SQL und führen Sie diese Abfrage aus, um die Tabelle zu erstellen, die wir verwenden: [SourceCode Language = ”SQL”] Erstellen Sie Tabelle `{Ihre Datenbank}`.`pushups` ( `pushups_id` int (10) nicht null auto_increment, `pushups_count` int (3) nicht null, `pushups_date` varchar (15) nicht null, `pushups_wpuser` varchar (100) nicht null, "Active" int (2) nicht null Standard "1", Index (`pushups_id`) ) Motor = MyISAM [/Sourcecode] Bis zu diesem Zeitpunkt ging es darum, die Infrastruktur zu erreichen, damit Sie anfangen können, Daten zu ziehen und auf fantastische Weise anzuzeigen. Von hier aus dreht sich alles um die Grafiken! Erstellen Sie eine neue PHP -Datei und rufen Sie sie auf Pushups_Results.php. Sie werden dies in Ihren WP-Content/Plugins/Flot-for-WP/Flot-Ordner hochladen, nachdem Sie den folgenden Code eingefügt haben: [SourceCode Language = ”PHP”] Php /* Beschreibung: Dieser Code soll von einem WordPress -Shortcode aufgerufen werden Es wird in der Datenbank aufgerufen und die Daten in einem Flot -Diagramm angezeigt. Autor: @JPhornor und @tarahornor Lizenz: GPL3 */ // Hier ist unsere Funktion! Funktion Pushups_results () { /* Holen Sie sich die DB -Verbindung. Wenn Sie keine connect_to_db.php erstellt haben Datei fügen Sie hier einfach Ihre eigenen Datenbankverbindungsinformationen hinzu */ include ("connect_to_db.php"); Connect_to_db (); /* Dies bringt uns den aktuellen angemeldeten Benutzer und weist den Benutzernamen zu zum Variablen -WPUSER, der in der Hauptabfrage verwendet wird */ get_currentuserinfo (); $ current_user = wp_get_current_user (); $ wpuser = $ current_user-> user_login; // der große Test! Wenn ein Benutzer nicht angemeldet ist, bekommen er nichts! if (! is_user_logged_in ()) { echo ‘ Login Um Pushup -Ergebnisse zu sehen!

Register Wenn Sie noch nicht.

"; } anders { // die Frage $ sql = mysql_query ("Auswählen * aus Pushups, wobei` pushups`.`pushups_wpuser` = '$ wpuser' und `pushups`.`active` = 1 order by` pushups`.`.`.`Pushups_date`` “); /* Min- und Max -Abfragen. Es ist im Allgemeinen nicht erforderlich, produzieren zu müssen Unsere eigenen Min- und Max -Zahlen für Flot Setzen Sie dies mit einem Komma, das Flott als Null interpretiert. */ $ min = mySQL_Query („Wählen Sie Pushups_count aus Pushups Order by PUBUPS_COUNT ASC Limit 1“); $ max = mySQL_Query („Wählen Sie Pushups_Count aus Pushups Order by pushups_count Desc Limit 1 ″); // Wir müssen den minischen Punkt im Diagramm berechnen while ($ row = mysql_fetch_array ($ min)) { $ min_count = $ row [’pushups_count’]; } $ min_count = $ min_count * .9; // Dies gibt uns einen Atemraum in der Tabelle // Berechnen wir den maximalen Punkt im Diagramm while ($ row = mysql_fetch_array ($ max)) { $ max_count = $ row [’pushups_count’]; }$ max_count = $ max_count * 1.1; // Dies gibt uns auch einen Atemraum in der Tabelle /* Jetzt generieren wir unser JavaScript und HTML auf der Seite. Dies ist nicht meine bevorzugte Art, es zu tun, aber es erledigt den Job. */ echo "

"; // Passen Sie die Breite und Höhe für Ihre WP -Installation in der Datei layout.css an. echo '

lustupergebnisse für'. $ wpuser. "

"; echo "

’; } }// Der Shortcode im Pushups -Ergebnisbeitrag add_shortCode (’pushups_results_sc '," pushups_results "); MySQL_CLOSE (); ?> [/Sourcecode] Ich weiß, dass das eine Menge Informationen ist, und ich habe mein Bestes getan, um Kommentare hinzuzufügen. Noch einmal, diese Datei namens Pushups_Results.php, wird in Ihren WP-Content/Plugins/Flot-for-WP/Flot-Ordner angezeigt. Es tut mir leid, wie komprimiert der Code hier aussieht. Wenn Sie jedoch meine Ressourcendateien herunterladen, können Sie den Inhalt in einem viel organisierteren Format sehen.

recap

Während dies viel Code ist, nehmen Sie sich die Zeit, um die Kommentare zu überprüfen. Es ist viel los und wenn Sie nicht verfolgen, wie Flots Daten interpretiert, werden Sie mit Ihren eigenen Daten kämpfen. In diesem Stück haben wir einige ziemlich dichte Prozesse angepackt. Ich habe versucht, es Ihnen einfach zu machen, indem Sie Sie kopieren und einfügen lassen, aber werden Sie nicht faul! Sie können dieses Plugin nicht einfach hinzufügen und magisch schöne Grafiken erhalten. Nehmen Sie sich also etwas Zeit, um diesen Code zu überprüfen. In diesem Teil der Serie, die wir behandelt haben, haben wir eine kurze Zusammenfassung:

• Schnapp dir das Flot -Plugin (für Leute, die nur in die Serie springen)
• Erstellen Sie einen Beitrag, um die Ergebnisse
anzuzeigen
• Fügen Sie den Flot -Code zu der Seite hinzu, die unsere Daten zieht und sie ordnungsgemäß anzeigt.

Ob Sie es glauben oder nicht, Sie sind wirklich meistens fertig! Wenn Sie Ihre Pushups -Ergebnisseite aktualisieren, sollten Sie ein Diagramm sehen! Im nächsten Teil dieser Serie werde ich einige sehr detaillierte Diskussionen darüber behandeln, wie man mit PHP und MySQL in Bezug auf Flots arbeitet. Im letzten Teil diskutiere ich, wie Sie Ihre Grafiken stylen können. Wenn Sie also Entwickler sind und Ihre Grafiken sofort zum Laufen bringen, möchten Sie möglicherweise zu späteren Teilen dieser Serie gehen.

häufig gestellte Fragen zu reaktionsschnellen Echtzeitdiagrammen in WordPress-Plugins und Ploting

Wie wähle ich das beste WordPress-Plugin zum Erstellen von reaktionsschnellen Echtzeitdiagrammen aus? Einige zu berücksichtigende Faktoren umfassen die Arten von Grafiken und Diagrammen, die das Plugin unterstützt, deren Benutzerfreundlichkeit, Anpassungsoptionen und ob es Echtzeitdatenaktualisierungen unterstützt. Sie sollten auch die Bewertungen und Bewertungen des Plugins sowie die Kompatibilität mit Ihrer Version von WordPress berücksichtigen. WordPress -Plugins zum Erstellen von Diagrammen und Diagrammen bieten eine Reihe von Anpassungsoptionen. Sie können normalerweise die Farben, Schriftarten und Größen Ihrer Grafiken ändern. Einige Plugins ermöglichen es Ihnen außerdem, Ihren Diagrammen Etiketten, Legenden und Tooltips hinzuzufügen, um eine bessere Datendarstellung zu erhalten.

Wie aktualisiere ich meine Grafiken mit Echtzeitdaten? Einige Plugins bieten integrierte Echtzeitdaten-Update-Funktionen, während andere möglicherweise die Daten manuell aktualisieren oder zusätzliche Tools oder Dienste verwenden müssen. Beziehen Sie sich immer auf die Dokumentation oder Unterstützung des Plugins für bestimmte Anweisungen. Echtzeitdiagramme. Beachten Sie jedoch, dass kostenlose Plugins Einschränkungen hinsichtlich der Funktionen und Unterstützung haben. Wenn Sie erweiterte Funktionen oder dedizierte Unterstützung benötigen, sollten Sie Premium -Plugins in Betracht ziehen. Seite ist normalerweise unkompliziert. Die meisten Plugins bieten einen Shortcode oder einen Block, den Sie in Ihren Beitrag oder Ihre Seite einfügen können. Anschließend konfigurieren Sie die Grafikeinstellungen und Daten in der Schnittstelle des Plugins. Ihr WordPress -Beitrag oder Ihre Seitendaten. Dies kann nützlich sein, um die Analysen Ihrer Website zu visualisieren, z. B. Seitenansichten oder Besucherdemografie. Überprüfen Sie immer die Funktionen und Dokumentation des Plugins, um festzustellen, ob diese Funktionalität unterstützt wird. Dies bedeutet, dass Benutzer über Datenpunkte schweben können, um weitere Informationen anzuzeigen, ein- und auszusetzen oder sogar auf Datenpunkte zu klicken, um zu anderen Seiten zu navigieren. Die Interaktivitätsniveau kann jedoch zwischen den Plugins variieren. Daher ist es wichtig, diese Funktion bei der Auswahl eines Plugins zu überprüfen.

Kann ich meine Diagramme mit diesen Plugins exportieren oder drucken? Erstellen von Diagrammen können Sie Ihre Grafiken exportieren oder drucken. Dies kann nützlich sein, wenn Sie Ihre Grafiken in Berichte oder Präsentationen einbeziehen müssen. Die Exportformate können variieren, aber häufig PNG, JPEG, PDF und SVG enthalten. mit beliebten Seitenbauer wie Elementor und Gutenberg. Auf diese Weise können Sie die Grafiken in Ihrer Seitenbuilderschnittstelle einfach hinzufügen und anpassen. Die Kompatibilität kann jedoch zwischen den Plugins variieren. Daher ist es wichtig, dies zu überprüfen, bevor Sie ein Plugin auswählen.

Benötige ich Codierungsfähigkeiten, um diese Plugins zu verwenden? Sie bieten normalerweise eine visuelle Schnittstelle, an der Sie Ihre Daten eingeben und Ihre Grafiken anpassen können. Einige Plugins bieten jedoch möglicherweise zusätzliche Funktionen oder Anpassungsoptionen, die grundlegender HTML- oder CSS -Kenntnisse erfordern.

Das obige ist der detaillierte Inhalt vonReaktionsschnelle Echtzeitdiagramme in WordPress: Plugins und Plotten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!