Créez une application de visualisation de données multi-graphiques à l'aide de PHP et Chart.js

Avec le développement continu d'Internet, une grande quantité de données est générée et stockée dans diverses applications et systèmes de réseau, notamment dans des domaines tels que le commerce électronique, les réseaux sociaux, la finance et la fabrication. Pour extraire plus d’informations de ces données, la visualisation des données est devenue une méthode populaire. En convertissant les données sous forme graphique, les utilisateurs peuvent plus facilement comprendre et analyser les données. Dans cet article, nous verrons comment créer une application de visualisation de données multi-graphiques à l'aide de PHP et Chart.js.

Qu'est-ce que Chart.js ?

Chart.js est une bibliothèque JavaScript open source qui permet la création de graphiques interactifs, dynamiques et réactifs. Il prend en charge de nombreux types de graphiques, tels que les histogrammes, les diagrammes circulaires, les graphiques linéaires, etc. Chart.js ne nécessite qu'une petite quantité de configuration et quelques balises HTML pour générer automatiquement des graphiques concis et esthétiques. De plus, Chart.js utilise l'élément Canvas basé sur HTML5 pour restituer les graphiques, afin qu'il puisse s'exécuter sur les navigateurs prenant en charge HTML5.

Créez une application de visualisation de données multi-graphiques à l'aide de PHP et Chart.js

Dans ce tutoriel, nous présenterons comment utiliser PHP et Chart.js pour créer une application simple de visualisation de données. Nous utiliserons MySQL comme base de données et PHP et Chart.js pour interroger et visualiser les données.

Étape 1 : Créer une table de base de données

Tout d'abord, nous devons créer une base de données nommée "sales" et y créer une table nommée "sales_data". La table doit contenir les champs suivants :

• id : ID auto-croissant
• month : mois de ventes
• revenue : chiffre d'affaires
• profit : profit

Utilisez l'instruction SQL suivante pour créer la table :

CREATE TABLE sales_data (
id INT NOT NULL AUTO_INCREMENT,
mois DATE NOT NULL,
revenue DECIMAL(10, 2) NOT NULL,
profit DECIMAL(10, 2) NOT NULL,
PRIMARY KEY (id)
);

Nous utilisera PHP Code pour insérer des données de ventes simulées dans ce tableau.

Étape 2 : Créer un script PHP

Ensuite, nous devons créer un script PHP qui se connectera à la base de données MySQL et lira les données de vente. Ce script renverra des données au format JSON qui pourront être utilisées pour afficher des graphiques dans Chart.js.

Voici un exemple de code du script PHP :

//Connectez-vous à la base de données MySQL
$username = "root";
$password = "";
$database = "sales" ;
$server = "localhost";

$conn = new mysqli($server, $username, $password, $database);

//Vérifiez si la connexion est réussie
if ($conn->connect_error) {

die("Connection failed: " . $conn->connect_error);

}

//Interroger la base de données MySQL
$query = "SELECT * FROM sales_data";
$result = $conn->query($query);

//Formater les résultats de la requête au format JSON
$data = array( );
while($row = $result->fetch_assoc()) {

$data[] = $row;

}

echo json_encode($data);

//Fermez la connexion MySQL
$conn-> ;close();

?>

Veuillez noter que ce script générera une chaîne au format JSON. Cette chaîne contient toutes les données de ventes interrogées.

Étape 3 : Créer des fichiers HTML et JavaScript

Maintenant, nous devons créer un fichier HTML pour afficher le graphique Chart.js et un fichier JavaScript pour traiter et dessiner le graphique Chart.js.

Voici un exemple de code pour un fichier HTML :

Veuillez noter que nous utilisons le fichier JavaScript de la bibliothèque Chart.js. Nous incluons également un fichier JavaScript personnalisé (app.js) dans le fichier HTML. Ce sera le fichier JavaScript utilisé pour interroger les données et dessiner le graphique.

Ce qui suit est l'exemple de code du fichier JavaScript :

//Interrogez la base de données MySQL
fonction loadSalesData(callback) {

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
        callback(xhr.responseText);
    }
}
xhr.open('GET', 'sales.php');
xhr.send();

}

//Dessinez un graphique linéaire
fonction drawLineChart(id, labels, data, label) {

var ctx = document.getElementById(id).getContext('2d');
new Chart(ctx, {
    type: 'line',
    data: {
        labels: labels,
        datasets: [{
            label: label,
            data: data,
            borderColor: 'rgb(75, 192, 192)',
            fill: false
        }]
    },
    options: {
        responsive: true,
        title: {
            display: true,
            text: '销售收入'
        },
        tooltips: {
            mode: 'index',
            intersect: false
        },
        hover: {
            mode: 'nearest',
            intersect: true
        },
        scales: {
            xAxes: [{
                display: true,
                scaleLabel: {
                    display: true,
                    labelString: '月份'
                }
            }],
            yAxes: [{
                display: true,
                scaleLabel: {
                    display: true,
                    labelString: '金额'
                }
            }]
        }
    }
});

}

//Charger des données et dessiner des graphiques
loadSalesData(function(response) {

//解析JSON格式的数据
var data = JSON.parse(response);

//获取月份和销售收入数据
var months = [];
var revenues = [];
for (var i = 0; i < data.length; i++) {
    months.push(data[i].month);
    revenues.push(data[i].revenue);
}

//绘制销售收入折线图
drawLineChart('revenue-chart', months, revenues, '销售收入');

//获取月份和利润数据
var profits = [];
for (var i = 0; i < data.length; i++) {
    profits.push(data[i].profit);
}

//绘制利润折线图
drawLineChart('profit-chart', months, profits, '利润');

});

Veuillez noter que nous avons défini deux fonctions : loadSalesData et drawLineChart. La fonction loadSalesData est utilisée pour charger des données au format JSON à partir d'un script PHP, tandis que la fonction drawLineChart est utilisée pour dessiner un graphique linéaire dans l'élément Canvas.

Nous avons utilisé un exemple de la bibliothèque Chart.js qui trace un graphique linéaire et utilise les données sur le chiffre d'affaires et les bénéfices.

Étape 4 : Exécutez l'application

Maintenant, nous sommes prêts à exécuter notre application ! Téléchargez simplement le fichier HTML et le fichier JavaScript sur le serveur Web et ouvrez le fichier HTML dans le navigateur. Nous obtiendrons deux graphiques : l’un est le graphique du chiffre d’affaires et l’autre est le graphique des bénéfices.

Conclusion

Dans cet article, nous avons expliqué comment créer une application de visualisation de données multi-graphiques à l'aide de PHP et Chart.js. Nous avons commencé par créer une table de base de données, puis avons créé un script PHP pour interroger les données. Ensuite, nous avons utilisé la bibliothèque Chart.js dans le fichier HTML et le fichier JavaScript pour traiter et dessiner le graphique. Enfin, nous exécutons notre application et obtenons deux magnifiques graphiques linéaires. Créer des applications de visualisation de données à l'aide de PHP et Chart.js est très simple et vous pouvez tirer parti de cette technologie pour visualiser des données dans n'importe quelle application Web.

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!