Créer des graphiques de visualisation de données à l'aide de PHP et Chart.js

Dans le monde actuel axé sur les données, l’analyse et la visualisation des données sont devenues des outils indispensables. Dans ce contexte, PHP, en tant que langage de programmation réseau populaire, peut être utilisé pour créer des sites Web et des applications hautement interactifs et dynamiques. Afin de mieux afficher les données, nous devons utiliser la bibliothèque de visualisation de données correspondante. Dans cet article, nous expliquerons comment créer des graphiques de visualisation de données à l'aide de PHP et de la bibliothèque Chart.js.

1. Présentation de Chart.js

Chart.js est une bibliothèque JavaScript basée sur HTML5 Canvas permettant de créer des graphiques simples, réactifs et personnalisables. Il contient plusieurs types de graphiques parmi lesquels choisir, tels que des graphiques à barres, des graphiques linéaires, des diagrammes circulaires, etc., qui peuvent être personnalisés de manière flexible via l'API.

2. Installez et utilisez Chart.js

Tout d'abord, nous allons télécharger la dernière version de Chart.js et l'extraire dans le répertoire lib sous le répertoire du projet. Ensuite, nous devons introduire le fichier de script Chart.js sur la page où le graphique doit être utilisé :

<script src="./lib/Chart.min.js"></script>

Ensuite, nous devons créer une balise canevas pour y afficher le graphique.

<canvas id="myChart" width="400" height="400"></canvas>

Enfin, nous devons instancier un nouvel objet Chart en JavaScript et configurer les options correspondantes, par exemple :

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});

Le code ci-dessus crée un graphique à barres et ajoute le données correspondantes.

3. Obtenir les données de la base de données

Normalement, nous devons obtenir les données de la base de données pour les présenter dans le graphique. Vous trouverez ci-dessous un exemple d'obtention de données à partir d'une base de données MySQL à l'aide de PHP.

Tout d'abord, nous devons nous connecter à la base de données MySQL. Par exemple :

$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";

// 创建连接
$conn = new mysqli($servername, $username, $password, $dbname);

// 检查连接
if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
}

Ensuite, nous devons interroger la base de données et obtenir les données. Par exemple :

$sql = "SELECT id, name, votes FROM candidates";
$result = $conn->query($sql);

$candidates = [];
if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        $candidates[] = [
            'name' => $row['name'],
            'votes' => $row['votes']
        ];
    }
}

Cela obtiendra les données requises de la table des candidats et les stockera dans le tableau $candidates.

Enfin, nous devons transmettre les données à Chart.js afin de créer le graphique correspondant.

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: <?php echo json_encode(array_column($candidates, 'name')); ?>,
        datasets: [{
            label: '# of Votes',
            data: <?php echo json_encode(array_column($candidates, 'votes')); ?>,
            backgroundColor: 'rgba(54, 162, 235, 0.2)',
            borderColor: 'rgba(54, 162, 235, 1)',
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});

Cela créera un graphique à barres basé sur les données acquises et le rendra sur la page.

4. Résumé

Dans cet article, nous avons présenté comment créer des graphiques de visualisation de données à l'aide de PHP et de la bibliothèque Chart.js. Nous avons appris à utiliser la bibliothèque Chart.js, à obtenir des données d'une base de données MySQL et à transmettre les données à Chart.js via PHP. Cela fait de la visualisation des données un processus simple tout en fournissant des informations précieuses pour les décisions basées sur les données.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!