Erstellen Sie Datenvisualisierungsdiagramme mit PHP und CanvasJS-PHP-Tutorial-php.cn

Erstellen Sie Datenvisualisierungsdiagramme mit PHP und CanvasJS

WBOY

Freigeben： 2023-05-11 18:30:02

Original

986 Leute haben es durchsucht

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!