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 :

c82c73cd1e2c3e83df3a7b10325a84abconnect_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 :

8b05045a5be5764f313ed5b9168a17e6
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
b2386ffb911b14667cb8f0f91ea547a7Chart.js Application de visualisation de données6e916e0f7d1e588d4f442bf645aedb2f
f2e8dc11142a8fde1bec25a0126afc162cacc6d41bbb37262a98f745aa00fbf0
32d8a8489ccf6ad22016e69b0555932f 2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
008f8b01c082af3d331c181c369562b4c2caaf3fc160dd2513ce82f021917f8b
31bf1d5b4e24f9a2df2a8454f6e05fa8deeb7d62f119a9af0803e6e8b6c2645a
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

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!