Erstellen Sie mit PHP und Chart.js eine Multi-Chart-Datenvisualisierungsanwendung

Durch die kontinuierliche Entwicklung des Internets werden große Datenmengen generiert und in verschiedenen Netzwerkanwendungen und Systemen gespeichert, insbesondere in Bereichen wie E-Commerce, soziale Netzwerke, Finanzen und Fertigung. Um mehr Informationen aus diesen Daten zu extrahieren, ist die Datenvisualisierung zu einer beliebten Methode geworden. Durch die Konvertierung von Daten in grafische Form können Benutzer die Daten leichter verstehen und analysieren. In diesem Artikel erfahren Sie, wie Sie mit PHP und Chart.js eine Anwendung zur Visualisierung von Daten mit mehreren Diagrammen erstellen.

Was ist Chart.js?

Chart.js ist eine Open-Source-JavaScript-Bibliothek, die die Erstellung interaktiver, dynamischer und reaktionsfähiger Diagramme ermöglicht. Es unterstützt viele Arten von Diagrammen, wie z. B. Säulendiagramme, Kreisdiagramme, Liniendiagramme usw. Chart.js erfordert nur einen geringen Konfigurationsaufwand und einige HTML-Tags, um automatisch prägnante und schöne Diagramme zu generieren. Darüber hinaus verwendet Chart.js das HTML5-basierte Canvas-Element zum Rendern von Diagrammen, sodass es in Browsern ausgeführt werden kann, die HTML5 unterstützen.

Erstellen Sie eine Multi-Chart-Datenvisualisierungsanwendung mit PHP und Chart.js.

In diesem Tutorial erklären wir, wie Sie mit PHP und Chart.js einfache Daten erstellen Visualisierungsanwendung Visualisierungsanwendungen. Wir werden MySQL als Datenbank und PHP und Chart.js zum Abfragen und Visualisieren der Daten verwenden.

Schritt 1: Datenbanktabelle erstellen

Zuerst müssen wir eine Datenbank mit dem Namen „sales“ erstellen und darin eine Tabelle mit dem Namen „sales_data“ erstellen. Die Tabelle sollte folgende Felder enthalten:

• id: sich selbst erhöhende ID
• Monat: Verkaufsmonat
• Umsatz: Umsatz #🎜 🎜#
Gewinn: Gewinn

Verwenden Sie die folgende SQL-Anweisung, um die Tabelle zu erstellen:

CREATE TABLE sales_data (

id INT NOT NULL AUTO_INCREMENT,
Monat DATE NOT NULL,
Umsatz DECIMAL(10, 2) NOT NULL,
Gewinn DECIMAL(10, 2) NOT NULL,
PRIMARY KEY (id )#🎜 🎜#);

Wir werden PHP-Code verwenden, um einige simulierte Verkaufsdaten in diese Tabelle einzufügen.

Schritt 2: Erstellen Sie ein PHP-Skript

Als nächstes müssen wir ein PHP-Skript erstellen, das eine Verbindung zur MySQL-Datenbank herstellt und die Verkaufsdaten liest. Dieses Skript gibt JSON-formatierte Daten zurück, die zum Anzeigen von Diagrammen in Chart.js verwendet werden können.

Das Folgende ist der Beispielcode des PHP-Skripts:

//Mit MySQL-Datenbank verbinden

$ username = " root";

$password = "";
$database = "sales";
$server = "localhost";

$conn = new mysqli($ server, $username, $password, $database);

//Überprüfen Sie, ob die Verbindung erfolgreich ist

if ($conn->connect_error) {

die("Connection failed: " . $conn->connect_error);

}

//MySQL-Datenbank abfragen

$query = "SELECT * FROM sales_data";

$result = $conn->query($query);
# 🎜🎜#//Formatieren Sie die Abfrageergebnisse im JSON-Format
$data = array();

while($row = $result->fetch_assoc()) {#🎜🎜 #

$data[] = $row;

#🎜 🎜#}

echo json_encode($data);

//MySQL-Verbindung schließen

$conn->close();#🎜 🎜##🎜 🎜#?>

Bitte beachten Sie, dass das Skript eine JSON-formatierte Zeichenfolge ausgibt. Dieser String enthält alle abgefragten Verkaufsdaten.

Schritt 3: HTML- und JavaScript-Dateien erstellen

Jetzt müssen wir eine HTML-Datei zum Anzeigen des Chart.js-Diagramms und eine JavaScript-Datei zum Verarbeiten und Plotten erstellen Chart.js-Diagramm.

Das Folgende ist ein Beispielcode für eine HTML-Datei:

# 🎜🎜#

# 🎜🎜#

Bitte beachten Sie, dass wir die JavaScript-Dateien der Chart.js-Bibliothek verwenden. Wir fügen auch eine benutzerdefinierte JavaScript-Datei (app.js) in die HTML-Datei ein. Dies ist die JavaScript-Datei, die zum Abfragen der Daten und zum Zeichnen des Diagramms verwendet wird.

Das Folgende ist der Beispielcode der JavaScript-Datei:

//MySQL-Datenbank abfragen
function loadSalesData(callback) {

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
        callback(xhr.responseText);
    }
}
xhr.open('GET', 'sales.php');
xhr.send();

#🎜🎜 #}# 🎜🎜#
//Ein Liniendiagramm zeichnen

function drawLineChart(id, labels, data, label) {

var ctx = document.getElementById(id).getContext('2d');
new Chart(ctx, {
    type: 'line',
    data: {
        labels: labels,
        datasets: [{
            label: label,
            data: data,
            borderColor: 'rgb(75, 192, 192)',
            fill: false
        }]
    },
    options: {
        responsive: true,
        title: {
            display: true,
            text: '销售收入'
        },
        tooltips: {
            mode: 'index',
            intersect: false
        },
        hover: {
            mode: 'nearest',
            intersect: true
        },
        scales: {
            xAxes: [{
                display: true,
                scaleLabel: {
                    display: true,
                    labelString: '月份'
                }
            }],
            yAxes: [{
                display: true,
                scaleLabel: {
                    display: true,
                    labelString: '金额'
                }
            }]
        }
    }
});

}

//Daten laden und Diagramme zeichnen

loadSalesData(function(response) {

//解析JSON格式的数据
var data = JSON.parse(response);

//获取月份和销售收入数据
var months = [];
var revenues = [];
for (var i = 0; i < data.length; i++) {
    months.push(data[i].month);
    revenues.push(data[i].revenue);
}

//绘制销售收入折线图
drawLineChart('revenue-chart', months, revenues, '销售收入');

//获取月份和利润数据
var profits = [];
for (var i = 0; i < data.length; i++) {
    profits.push(data[i].profit);
}

//绘制利润折线图
drawLineChart('profit-chart', months, profits, '利润');

});

Bitte beachten Sie, dass wir zwei Funktionen definiert haben: loadSalesData und drawLineChart . Die Funktion „loadSalesData“ wird zum Laden von Daten im JSON-Format aus einem PHP-Skript verwendet, während die Funktion „drawLineChart“ zum Zeichnen eines Liniendiagramms im Canvas-Element verwendet wird.

Wir haben ein Beispiel aus der Chart.js-Bibliothek verwendet, das ein Liniendiagramm zeichnet und Umsatz- und Gewinndaten verwendet.

Schritt 4: Führen Sie die Anwendung aus

Jetzt sind wir bereit, unsere Anwendung auszuführen! Laden Sie einfach die HTML-Datei und die JavaScript-Datei auf den Webserver hoch und öffnen Sie die HTML-Datei im Browser. Wir erhalten zwei Diagramme: eines ist das Umsatzdiagramm und das andere ist das Gewinndiagramm.

SCHLUSSFOLGERUNG

In diesem Artikel haben wir vorgestellt, wie man mit PHP und Chart.js eine Multi-Chart-Datenvisualisierungsanwendung erstellt. Wir begannen mit der Erstellung einer Datenbanktabelle und erstellten dann ein PHP-Skript zur Abfrage der Daten. Als Nächstes verwendeten wir die Chart.js-Bibliothek in der HTML-Datei und die JavaScript-Datei, um das Diagramm zu verarbeiten und zu zeichnen. Schließlich führen wir unsere Anwendung aus und erhalten zwei schöne Liniendiagramme. Das Erstellen von Datenvisualisierungsanwendungen mit PHP und Chart.js ist sehr einfach, und Sie können diese Technologie nutzen, um Daten in jeder Webanwendung zu visualisieren.

Das obige ist der detaillierte Inhalt vonErstellen Sie mit PHP und Chart.js eine Multi-Chart-Datenvisualisierungsanwendung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!