Praktische Methode für PHP, um Online -Diagramm und Datenvisualisierung zu realisieren

So realisieren Sie Online -Diagramme und Datenvisualisierung in PHP

In modernen Webanwendungen verbessert die grafische Anzeige von Daten nicht nur die Benutzererfahrung, sondern hilft auch, Dateninhalte intuitiver zu verstehen. Mit der Kombination aus PHP- und Front-End-Diagrammbibliothek kann eine effiziente und dynamische Datenvisualisierung erreicht werden. In diesem Artikel werden zwei gemeinsame Implementierungsmethoden veröffentlicht: Diagramm.js und Google -Diagramme.

Diagramme mit chart.js anzeigen

Diagramm.js ist eine Open -Source -Bibliothek für JavaScript -Diagramme, die Bar -Diagramme, Zeilendiagramme, Kreisdiagramme und andere Typen unterstützt. Die automatische Anzeige von Diagrammen kann erreicht werden, indem JavaScript -Code in PHP dynamisch generiert und Daten bestanden werden.

<?php
// Daten definieren
$data = array(
    "January" => 10,,
    "Februar" => 20,
    "März" => 15,
    "April" => 25,
    "Mai" => 30,
    "Juni" => 20
);

// JavaScript -Code generieren $ JSCODE = "
<script src='https://cdn.jsdelivr.net/npm/chart.js'></script>
<script>
    var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: " . json_encode(array_keys($data)) . ",
            datasets: [{
                label: 'Number of Sales',
                data: " . json_encode(array_values($data)) . ",
                backgroundColor: 'rgba(75, 192, 192, 0.2)',
                borderColor: 'rgba(75, 192, 192, 1)',
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
</script>
";

// Ausgabetabelle Echo "<canvas id='myChart' width='400' height='400'></canvas> ";
echo $ jscode;
?>

In diesem Code ist PHP dafür verantwortlich, Daten vorzubereiten und entsprechende JavaScript -Skripte zu generieren und das Diagramm -Rendering durch das Canvas -Tag in HTML zu vervollständigen.

Generieren Sie visuelle Diagramme mit Google -Diagrammen

Google Charts ist eine von Google bereitgestellte freie Diagrammlösung, die eine Vielzahl von Arten von Diagrammen unterstützt, z. B. Kreisdiagramme, Karten, Balkendiagramme usw. Bei Verwendung mit PHP können Daten dynamisch erstellt und auf die JavaScript -Konfiguration ausgegeben werden.

<?php
// Daten definieren
$data = array(
    array('Task', 'Hours per Day'),
    array('Work', 11),
    array('Eat', 2),
    array('Sleep', 7),
    array('Exercise', 4)
);

// erzeugen HTML Code
$htmlCode = "
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type='text/javascript'>
  google.charts.load('current', {'packages':['corechart']});
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
    var data = google.visualization.arrayToDataTable(" . json_encode($data) . ");

    var options = {
      title: 'My Daily Activities',
      pieHole: 0.4,
    };

    var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
    chart.draw(data, options);
  }
</script>
<div id='donutchart' style='width: 900px; height: 500px;'></div>
";

// Ausgabediagramm echo $ htmlcode;
?>

Mit Google -Diagrammen können interaktive Diagramme für eine Vielzahl von Datenanalyse- und Präsentationsszenarien problemlos erstellt werden.

Zusammenfassen

PHP wird mit der Front-End-Diagrammbibliothek kombiniert, um die Datenvisualisierungsfunktionen erheblich zu verbessern. Unabhängig davon, ob es sich um ein Balkendiagramm handelt, das über Diagramm.js oder ein von Google Charts erstellter Kreisdiagramm implementiert ist, können Entwickler ihren Websites über flexible Datenorganisationen und Skriptausgabe intuitive Datenausdruck hinzufügen. Während des Entwicklungsprozesses können Sie geeignete Diagramm -Tools nach spezifischen Anforderungen auswählen, um die besten visuellen Effekte und interaktiven Erfahrungen zu erzielen.