Deutsch
Deutsch
Im heutigen Informationszeitalter ist die Datenvisualisierung zu einem der wichtigsten Indikatoren für die Messung von Produkten oder Projekten geworden. Als Entwickler ist es entscheidend, Datendiagramme mit den richtigen Tools und Techniken zu präsentieren. Als leistungsstarke serverseitige Skriptsprache kann PHP Daten problemlos verarbeiten und anzeigen. In diesem Artikel wird detailliert erläutert, wie PHP und Diagramm.js verwendet werden, um Datendiagramm -Anzeigenfunktionen zu entwickeln und relevante Codebeispiele anzugeben.
Derzeit können auf dem Markt eine Vielzahl von Open -Source -Daten -Diagramm -Bibliotheken ausgewählt werden, wie z.
In diesem Artikel werden wir Diagramm.js als Beispiel nutzen, um zu zeigen, wie die Datendiagrammfunktionen in Kombination mit PHP entwickelt werden. Chart.js ist eine leichte JavaScript -Diagrammbibliothek, die eine Vielzahl von Diagrammtypen unterstützt und mit großen modernen Browsern kompatibel ist.
Zunächst müssen wir die Bibliothek von Chart.JS in das Projekt einführen. Es kann über CDN eingeführt oder lokal heruntergeladen und gehostet werden.
<!DOCTYPE html>
<html>
<head>
<title>Datendiagrammanzeige</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<canvas id="myChart"></canvas>
</body>
</html>
Nehmen wir als nächstes an, dass es eine Datenbanktabelle mit Verkaufsdaten gibt, und die Felder enthalten Informationen wie Verkaufs- und Verkaufsdatum. Wir müssen die Daten über PHP aus der Datenbank abrufen und für die Präsentation an das Front-End-Diagramm weitergeben.
<?php
// Angenommen, Sie haben sich mit der Datenbank verbunden，und erhalten Sie das Datenbankverbindungsobjekt$conn
$sql = "SELECT * FROM sales";
$result = $conn->query($sql);
$data = array();
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
$data[] = $row;
}
}
// Daten inJSONFormat
$jsonData = json_encode($data);
?>
Als nächstes müssen wir die von PHP übermittelten Daten über JavaScript übergeben und sie als Diagramm rendern. Der folgende Code zeigt, wie die Verkaufsdaten behandelt und angezeigt werden:
<script>
// ErhaltenPHPBestandenJSONDaten
var data = <?php echo $jsonData; ?>;
var labels = [];
var values = [];
// 遍历Daten并提取销售日期和Verkäufe
data.forEach(function(item) {
labels.push(item.date);
values.push(item.amount);
});
// erstellenChartObjekt und das Diagramm rendern
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar', // Diagrammtyp
data: {
labels: labels,
datasets: [{
label: 'Verkäufe',
data: values,
backgroundColor: 'rgba(75, 192, 192, 0.2)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>
Zusätzlich zur grundlegenden Display -Anzeige können Sie die Daten nach tatsächlichen Anforderungen weiter verarbeiten. Sie können beispielsweise die Daten filtern, sortieren oder mehr Hilfsinformationen zum Diagramm hinzufügen.
Durch die Kombination von PHP und chart.js können wir leicht reichhaltige und schöne Datendiagrammfunktionen entwickeln. Unabhängig davon, ob es sich um ein Balkendiagramm, ein Zeilendiagramm oder ein Kreisdiagramm handelt, kann Diagramm.js eine große Flexibilität bieten und uns helfen, Daten zu visualisieren und die Benutzererfahrung zu verbessern.
Ich hoffe, dieser Artikel wird Ihnen hilfreich sein und Ihnen helfen, schnell mit PHP und Diagramm.js zu beginnen, um Datendiagrammfunktionen zu entwickeln.
