Méthode pratique pour que PHP réalise la visualisation du graphique et des données en ligne

Comment réaliser les graphiques en ligne et la visualisation des données dans PHP

Dans les applications Web modernes, l'affichage graphique des données améliore non seulement l'expérience utilisateur, mais aide également à comprendre le contenu des données plus intuitivement. Avec la combinaison de PHP et de bibliothèque de graphiques frontaux, une visualisation des données efficace et dynamique peut être réalisée. Cet article partagera deux méthodes de mise en œuvre communes: les graphiques Chart.js et Google.

Afficher les graphiques en utilisant un graphique.js

Chart.js est une bibliothèque de graphiques JavaScript open source qui prend en charge les graphiques à barres, les graphiques de ligne, les graphiques à tarte et autres types. L'affichage automatique des graphiques peut être obtenu en générant dynamiquement du code JavaScript dans PHP et en passant des données.

<?php
// Définir les données
$data = array(
    "January" => 10,
    "Février" => 20,
    "Mars" => 15,
    "Avril" => 25,
    "May" => 30,
    "Juin" => 20
));

// générer du code javascript $ 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>
"

// Tableau de sortie Echo "<canvas id='myChart' width='400' height='400'></canvas> "
Echo $ jscode;
?>

Dans ce code, PHP est responsable de la préparation des données et de la génération de scripts JavaScript correspondants et de la réalisation du rendu du graphique via la balise Canvas dans HTML.

Générer des graphiques visuels à l'aide des graphiques Google

Google Charts est une solution de cartographie gratuite fournie par Google, prenant en charge une variété de types de graphiques, tels que des graphiques à tarte, des cartes, des graphiques à barres, etc. Lorsqu'ils sont utilisés avec PHP, les données peuvent être construites dynamiquement et sortir vers la configuration JavaScript.

<?php
// Définir les données
$data = array(
    array('Task', 'Hours per Day'),
    array('Work', 11),
    array('Eat', 2),
    array('Sleep', 7),
    array('Exercise', 4)
);

// générer 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>
"

// Tableau de sortie Echo $ htmlcode;
?>

Avec Google Charts, les graphiques interactifs peuvent être facilement conçus pour une variété de scénarios d'analyse de données et de présentation.

Résumer

PHP est combiné avec la bibliothèque du graphique frontal pour améliorer considérablement les capacités de visualisation des données. Qu'il s'agisse d'un graphique à barres implémenté via Chart.js ou un graphique à tarte créé par Google Charts, les développeurs peuvent ajouter une expression de données intuitive à leurs sites Web via une organisation de données flexible et une sortie de script. Au cours du processus de développement, vous pouvez sélectionner des outils de graphique appropriés en fonction des besoins spécifiques pour obtenir les meilleurs effets visuels et l'expérience interactive.