Deutsch
Deutsch
In der Webentwicklung kann die Datenvisualisierung Benutzern dabei helfen, Datentrends und -muster intuitiv zu verstehen. Durch die Kombination der PHP-Schnittstelle und der ECharts-Bibliothek können wir die Back-End-Daten problemlos in Form dynamischer statistischer Diagramme auf der Webseite anzeigen, um eine Echtzeitvisualisierung der Daten zu erreichen.
Bevor Sie beginnen, stellen Sie sicher, dass Sie die folgenden Umgebungsvorbereitungen abgeschlossen haben:
Die Funktion der PHP-Schnittstelle besteht darin, Daten aus der Datenbank abzurufen und im JSON-Format an das Frontend zurückzugeben. Hier ist ein einfaches Beispiel:
<?php
// Stellen Sie eine Verbindung zur Datenbank her
$mysqli = new mysqli("localhost", "username", "password", "database");
// Verbindung prüfen
if ($mysqli-> connect_error) {
die("Datenbankverbindung fehlgeschlagen: " . $mysqli->connect_error);
}
// Daten abfragen $query = "SELECT * FROM data_table";
$result = $mysqli->query($query);
// In JSON-Format konvertieren $data = [];
while ($row = $result->fetch_assoc()) {
$data[] = $row;
}
//Ergebnisheader zurückgeben('Content-Type: application/json');
echo json_encode($data);
// Verbindung schließen $mysqli->close();
?>Dieser Code stellt über mysqli eine Verbindung zur Datenbank her, liest die Daten in der Tabelle und gibt sie im JSON-Format für Front-End-Aufrufe zurück.
Der Front-End-Teil ist hauptsächlich dafür verantwortlich, die von der PHP-Schnittstelle über Ajax-Anforderungen zurückgegebenen Daten abzurufen und ECharts zum Generieren statistischer Diagramme zu verwenden.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Beispiel für die Visualisierung von PHP- und ECharts-Daten</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.6.0/echarts.min.js"></script>
</head>
<body>
<div id="chart" style="width:800px;height:400px;"></div>
<script type="text/javascript">
$.ajax({
url: "api.php",
type: "GET",
dataType: "json",
success: function(data) {
var chart = echarts.init(document.getElementById('chart'));
var option = {
xAxis: {
type: 'category',
data: data.map(item => item.name)
},
yAxis: {
type: 'value'
},
series: [{
data: data.map(item => item.value),
type: 'bar'
}]
};
chart.setOption(option);
}
});
</script>
</body>
</html>Diese HTML-Seite ruft die PHP-Schnittstelle über die Ajax-Funktion von jQuery auf. Nach erfolgreichem Abrufen der Daten wird dynamisch ein ECharts-Histogramm generiert, um eine Front-End-Visualisierung der Back-End-Daten zu erreichen.
Es wird empfohlen, in der Datenbank eine Datentabelle zu erstellen, die zwei grundlegende Felder enthält:
Die Feldstruktur kann an die Geschäftsanforderungen angepasst werden und die Abfrageanweisung kann synchron in der Schnittstelle geändert werden.
Durch die Kombination von PHP-Schnittstelle und ECharts können Entwickler die Anzeige von Datenvisualisierungen effizient realisieren. Lesen Sie die Daten aus der Back-End-Datenbank und rendern Sie sie dann dynamisch über die Front-End-ECharts, um eine voll funktionsfähige und hochgradig interaktive Statistikdiagrammseite zu erstellen. Diese Methode eignet sich für verschiedene Webanwendungsszenarien wie Berichtsanzeige, Geschäftsanalyse und Überwachungssysteme.
