Heim Backend-Entwicklung PHP-Tutorial Erstellen Sie Datenvisualisierungsdiagramme mit PHP und CanvasJS

Erstellen Sie Datenvisualisierungsdiagramme mit PHP und CanvasJS

May 11, 2023 pm 05:07 PM
php 数据可视化 canvasjs

Mit dem Datenwachstum und der Entwicklung des Internets sind Datenverarbeitung und -visualisierung zu einem wichtigen Bestandteil der Technologiebranche geworden. Ganz gleich, ob Sie im Marketing, im Finanzwesen, im Gesundheitswesen oder in einem anderen Bereich tätig sind, die Visualisierung von Daten ist unerlässlich.

Bei der Datenvisualisierung sind Diagramme ein sehr nützliches Werkzeug. Die Aufgabe von Diagrammen besteht darin, Daten in eine visuelle Form umzuwandeln, die es uns erleichtert, Datentrends zu verstehen und zu analysieren. Daher wird in diesem Artikel erläutert, wie Sie Datenvisualisierungsdiagramme mit PHP und CanvasJS erstellen.

CanvasJS ist eine JavaScript-Bibliothek zum Erstellen interaktiver und dynamischer Diagramme. CanvasJS unterstützt Hunderte von Diagrammtypen und funktioniert auf verschiedenen Geräten und Browsern. Um ein Diagramm mit PHP und CanvasJS zu erstellen, müssen wir die folgenden Schritte ausführen.

Schritt 1: CanvasJS installieren

Um Diagramme mit CanvasJS zu erstellen, müssen Sie zunächst CanvasJS installieren. Das Herunterladen und Installieren von CanvasJS ist so einfach wie das Herunterladen des Quellcodes auf Ihren lokalen Computer. Sie können den Quellcode von der offiziellen CanvasJS-Website herunterladen. Entpacken Sie es nach dem Herunterladen auf Ihren Webserver und schon ist es einsatzbereit.

Schritt 2: Daten erstellen

Bevor wir das Diagramm erstellen, benötigen wir Daten. In PHP können Sie MySQL oder andere Datenbanken zum Speichern von Daten verwenden. Beispielsweise können wir den folgenden Code verwenden, um Daten aus der MySQL-Datenbank abzurufen.

//连接至数据库
$con = mysqli_connect("host","username","password","database");

//查询数据
$result = mysqli_query($con,"SELECT * FROM 数据表名");

//将数据保存到数组中
$data = array();
while ($row = mysqli_fetch_array($result)) {
    $data[] = array("label"=>$row["标签"],"y"=>$row["数值"]);
}

//关闭连接
mysqli_close($con);
Nach dem Login kopieren

Dieses Code-Snippet ruft Daten aus der MySQL-Datenbank ab und speichert die Daten in einem Datenarray. Sie können die Datentabellen und Felder der Abfrage nach Bedarf ändern.

Schritt 3: Erstellen Sie das Diagramm

Da wir nun die Daten haben, erstellen wir das Diagramm. Wir können interaktive Diagramme erstellen, indem wir unsere Daten mithilfe des folgenden Codes an CanvasJS übergeben.

<!DOCTYPE html>
<html>
<head>
    <title>使用PHP和CanvasJS创建数据可视化图表</title>
    <script src="canvasjs.min.js"></script>
</head>
<body>
    <div id="chartContainer" style="height: 370px; width: 100%;"></div>

    <script type="text/javascript">
        window.onload = function () {
            var chart = new CanvasJS.Chart("chartContainer", {
                animationEnabled: true,
                title:{
                    text: "数据可视化图表"
                },
                axisY: {
                    title: "数值"
                },
                data: [{
                    type: "column",
                    dataPoints: <?php echo json_encode($data, JSON_NUMERIC_CHECK); ?>
                }]
            });
            chart.render();
        }
    </script>
</body>
</html>
Nach dem Login kopieren

In diesem Codeausschnitt erstellen wir eine Webseite und integrieren den CanvasJS-Quellcode darin. In unserem Code erstellen wir das div-Element und setzen seine ID auf „chartContainer“. Dies ist unser Diagrammcontainer. Wir werden JavaScript verwenden, um das Diagramm zu erstellen und in diesen Container zu rendern.

Jetzt müssen wir uns mit einigen Diagrammeinstellungen befassen. Hier verwenden wir ein Diagramm vom Typ „Säule“ und geben die Daten und andere Details an. Hier können Sie Titel, Datenbeschriftungen usw. anpassen. CanvasJS unterstützt viele andere Diagrammtypen, und Sie können denjenigen auswählen, der Ihren Anforderungen entspricht.

Hier fügen wir nicht nur Daten zum Datenarray hinzu. Wir verwenden json_encode, um das Datenarray in JavaScript-Objekte zu konvertieren. Die Option JSON_NUMERIC_CHECK sorgt dafür, dass die Ausgabezahlen nicht als Strings ausgegeben werden. Der spezifische Inhalt kann in der offiziellen CanvasJS-Dokumentation eingesehen werden.

Schritt 4: Lokal oder in der Cloud testen

Der letzte Schritt besteht darin, Ihre Anwendung zu testen. Sie können einen PHP-Webserver auf Ihrem lokalen Computer ausführen. Wenn Sie einen WAMP-Server verwenden, können Sie Ihre Anwendung testen, indem Sie einen Browser auf localhost oder der Adresse 127.0.0.1 öffnen. Wenn Sie einen XAMPP-Server verwenden, öffnen Sie den Browser unter der Adresse localhost oder 127.0.0.1.

Wenn Sie einen Webhosting-Dienst nutzen, können Sie Ihre Anwendung auf den Hosting-Server hochladen und über einen Browser darauf zugreifen.

Zusammenfassung

Das Erstellen von Datenvisualisierungsdiagrammen mit PHP und CanvasJS ist ein sehr einfacher Vorgang. Rufen Sie zunächst die Daten ab und konvertieren Sie sie dann mit CanvasJS in ein visuelles Diagramm. Mit CanvasJS stehen viele Diagrammtypen und anpassbare Optionen zur Auswahl, sodass Sie interaktive Diagramme erstellen können, die Ihren Anforderungen entsprechen.

Das obige ist der detaillierte Inhalt vonErstellen Sie Datenvisualisierungsdiagramme mit PHP und CanvasJS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Chat -Befehle und wie man sie benutzt
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

PHP 8.4 Installations- und Upgrade-Anleitung für Ubuntu und Debian PHP 8.4 Installations- und Upgrade-Anleitung für Ubuntu und Debian Dec 24, 2024 pm 04:42 PM

PHP 8.4 bringt mehrere neue Funktionen, Sicherheitsverbesserungen und Leistungsverbesserungen mit einer beträchtlichen Menge an veralteten und entfernten Funktionen. In dieser Anleitung wird erklärt, wie Sie PHP 8.4 installieren oder auf PHP 8.4 auf Ubuntu, Debian oder deren Derivaten aktualisieren. Obwohl es möglich ist, PHP aus dem Quellcode zu kompilieren, ist die Installation aus einem APT-Repository wie unten erläutert oft schneller und sicherer, da diese Repositorys in Zukunft die neuesten Fehlerbehebungen und Sicherheitsupdates bereitstellen.

So richten Sie Visual Studio-Code (VS-Code) für die PHP-Entwicklung ein So richten Sie Visual Studio-Code (VS-Code) für die PHP-Entwicklung ein Dec 20, 2024 am 11:31 AM

Visual Studio Code, auch bekannt als VS Code, ist ein kostenloser Quellcode-Editor – oder eine integrierte Entwicklungsumgebung (IDE) –, die für alle gängigen Betriebssysteme verfügbar ist. Mit einer großen Sammlung von Erweiterungen für viele Programmiersprachen kann VS Code c

7 PHP-Funktionen, die ich leider vorher nicht kannte 7 PHP-Funktionen, die ich leider vorher nicht kannte Nov 13, 2024 am 09:42 AM

Wenn Sie ein erfahrener PHP-Entwickler sind, haben Sie möglicherweise das Gefühl, dass Sie dort waren und dies bereits getan haben. Sie haben eine beträchtliche Anzahl von Anwendungen entwickelt, Millionen von Codezeilen debuggt und eine Reihe von Skripten optimiert, um op zu erreichen

Wie analysiert und verarbeitet man HTML/XML in PHP? Wie analysiert und verarbeitet man HTML/XML in PHP? Feb 07, 2025 am 11:57 AM

Dieses Tutorial zeigt, wie XML -Dokumente mit PHP effizient verarbeitet werden. XML (Extensible Markup-Sprache) ist eine vielseitige textbasierte Markup-Sprache, die sowohl für die Lesbarkeit des Menschen als auch für die Analyse von Maschinen entwickelt wurde. Es wird üblicherweise für die Datenspeicherung ein verwendet und wird häufig verwendet

Erklären Sie JSON Web Tokens (JWT) und ihren Anwendungsfall in PHP -APIs. Erklären Sie JSON Web Tokens (JWT) und ihren Anwendungsfall in PHP -APIs. Apr 05, 2025 am 12:04 AM

JWT ist ein offener Standard, der auf JSON basiert und zur sicheren Übertragung von Informationen zwischen Parteien verwendet wird, hauptsächlich für die Identitätsauthentifizierung und den Informationsaustausch. 1. JWT besteht aus drei Teilen: Header, Nutzlast und Signatur. 2. Das Arbeitsprinzip von JWT enthält drei Schritte: Generierung von JWT, Überprüfung von JWT und Parsingnayload. 3. Bei Verwendung von JWT zur Authentifizierung in PHP kann JWT generiert und überprüft werden, und die Funktionen und Berechtigungsinformationen der Benutzer können in die erweiterte Verwendung aufgenommen werden. 4. Häufige Fehler sind Signaturüberprüfungsfehler, Token -Ablauf und übergroße Nutzlast. Zu Debugging -Fähigkeiten gehört die Verwendung von Debugging -Tools und Protokollierung. 5. Leistungsoptimierung und Best Practices umfassen die Verwendung geeigneter Signaturalgorithmen, das Einstellen von Gültigkeitsperioden angemessen.

PHP -Programm zum Zählen von Vokalen in einer Zeichenfolge PHP -Programm zum Zählen von Vokalen in einer Zeichenfolge Feb 07, 2025 pm 12:12 PM

Eine Zeichenfolge ist eine Folge von Zeichen, einschließlich Buchstaben, Zahlen und Symbolen. In diesem Tutorial wird lernen, wie Sie die Anzahl der Vokale in einer bestimmten Zeichenfolge in PHP unter Verwendung verschiedener Methoden berechnen. Die Vokale auf Englisch sind a, e, i, o, u und sie können Großbuchstaben oder Kleinbuchstaben sein. Was ist ein Vokal? Vokale sind alphabetische Zeichen, die eine spezifische Aussprache darstellen. Es gibt fünf Vokale in Englisch, einschließlich Großbuchstaben und Kleinbuchstaben: a, e, ich, o, u Beispiel 1 Eingabe: String = "TutorialPoint" Ausgabe: 6 erklären Die Vokale in der String "TutorialPoint" sind u, o, i, a, o, ich. Insgesamt gibt es 6 Yuan

Erklären Sie die späte statische Bindung in PHP (statisch: :). Erklären Sie die späte statische Bindung in PHP (statisch: :). Apr 03, 2025 am 12:04 AM

Statische Bindung (statisch: :) implementiert die späte statische Bindung (LSB) in PHP, sodass das Aufrufen von Klassen in statischen Kontexten anstatt Klassen zu definieren. 1) Der Analyseprozess wird zur Laufzeit durchgeführt.

Was sind PHP Magic -Methoden (__construct, __Destruct, __call, __get, __set usw.) und geben Sie Anwendungsfälle an? Was sind PHP Magic -Methoden (__construct, __Destruct, __call, __get, __set usw.) und geben Sie Anwendungsfälle an? Apr 03, 2025 am 12:03 AM

Was sind die magischen Methoden von PHP? Zu den magischen Methoden von PHP gehören: 1. \ _ \ _ Konstrukt, verwendet, um Objekte zu initialisieren; 2. \ _ \ _ Destruct, verwendet zur Reinigung von Ressourcen; 3. \ _ \ _ Call, behandeln Sie nicht existierende Methodenaufrufe; 4. \ _ \ _ GET, Implementieren Sie den dynamischen Attributzugriff; 5. \ _ \ _ Setzen Sie dynamische Attributeinstellungen. Diese Methoden werden in bestimmten Situationen automatisch aufgerufen, wodurch die Code -Flexibilität und -Effizienz verbessert werden.

See all articles