Maison > Article > développement back-end > Comment utiliser l'interface PHP et ECharts pour générer des graphiques statistiques en temps réel mis à jour dynamiquement

Comment utiliser l'interface PHP et ECharts pour générer des graphiques statistiques en temps réel mis à jour dynamiquement

王林original: 2023-12-17 08:50:381094parcourir

Comment utiliser linterface PHP et ECharts pour générer des graphiques statistiques en temps réel mis à jour dynamiquement

Comment utiliser l'interface PHP et ECharts pour générer des graphiques statistiques en temps réel mis à jour dynamiquement, des exemples de code spécifiques sont nécessaires

Avec le développement continu de la technologie, l'analyse et la visualisation des données sont devenues l'un des outils essentiels pour les entreprises modernes et des établissements. En tant que bibliothèque de visualisation de données JavaScript populaire, ECharts est devenue l'un des outils privilégiés pour la visualisation de données. En combinant l'interface PHP avec ECharts, vous pouvez obtenir des effets de visualisation de données plus flexibles et dynamiques.

Cet article expliquera comment utiliser l'interface PHP et ECharts pour générer des graphiques statistiques en temps réel mis à jour dynamiquement, et fournira des exemples de code spécifiques pour aider les lecteurs à comprendre les technologies et les méthodes de mise en œuvre associées.

1. Préparation

Avant de commencer, nous devons comprendre les technologies et outils suivants :

PHP : en tant que langage de programmation côté serveur couramment utilisé, PHP peut nous aider à lire et à traiter les données.
MySQL : en tant que base de données relationnelle couramment utilisée, MySQL peut nous aider à stocker et à gérer des données.
ECharts : en tant que bibliothèque de visualisation de données JavaScript populaire, ECharts peut nous aider à générer et à afficher des graphiques.
Serveur Apache : en tant que logiciel de serveur Web courant, Apache peut nous aider à créer un environnement PHP et à exécuter du code.

Après avoir préparé les outils et technologies ci-dessus, nous pouvons commencer la mise en œuvre spécifique.

2. Processus de mise en œuvre

Ensuite, nous présenterons comment utiliser l'interface PHP et ECharts pour générer des graphiques statistiques en temps réel mis à jour dynamiquement et fournirons des exemples de code spécifiques.

Créer une base de données

Tout d'abord, nous devons créer une base de données et créer une table pour stocker les données. Ici, nous créons une base de données nommée « stats » et une table nommée « données » pour stocker les données.

La structure de la table est la suivante :

CREATE TABLE `data` (
   `id` int(11) NOT NULL AUTO_INCREMENT,
   `value` int(11) NOT NULL,
   `time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
   PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

Écrire une interface php

Ensuite, nous devons écrire une interface php pour fournir des données au front-end. Dans cet exemple, nous allons écrire une interface nommée « get_data.php » pour obtenir les 10 dernières données et les renvoyer au front-end au format JSON.

<?php

// 连接数据库
$host = 'localhost';
$user = 'root';
$password = '';
$database = 'stats';
$mysqli = new mysqli($host, $user, $password, $database);
if ($mysqli->connect_error) {
   die('Connect Error(' . $mysqli->connect_errno . ') ' . $mysqli->connect_error);
}

// 获取数据
$data = array();
$query = "SELECT * FROM data ORDER BY time DESC LIMIT 10";
$result = $mysqli->query($query);
if ($result->num_rows > 0) {
   while ($row = $result->fetch_assoc()) {
       $data[] = $row;
   }
}

// 返回JSON数据
header('Content-Type: application/json');
echo json_encode($data);

// 关闭数据库连接
$mysqli->close();

?>

Écrire la page front-end

Ensuite, nous devons écrire une page front-end pour afficher les données et générer des graphiques. Dans cet exemple, nous allons écrire une page nommée « index.html » pour afficher les 10 dernières données et générer un graphique linéaire mis à jour en temps réel.

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>ECharts实时统计图</title>
   <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.2/echarts.min.js"></script>
</head>
<body>
   <div id="chart" style="width: 800px; height: 400px;"></div>
   <script>
       // 初始化图表
       var chart = echarts.init(document.getElementById('chart'));

       // 设置图表配置项
       var option = {
           title: {
               text: '实时统计图'
           },
           tooltip: {
               trigger: 'axis',
               axisPointer: {
                   animation: false
               }
           },
           legend: {
                data:['实时数据']
           },
           xAxis: {
               type: 'time',
               splitLine: {
                   show: false
               }
           },
           yAxis: {
               type: 'value',
               splitLine: {
                   show: false
               }
           },
           series: [{
               name: '实时数据',
               type: 'line',
               showSymbol: false,
               hoverAnimation: false,
               data: []
           }]
       };
       chart.setOption(option);

       // 定时更新图表数据
       setInterval(function() {
           $.getJSON('get_data.php', function(data) {
               option.series[0].data = data.reverse();
               chart.setOption(option);
           });
       }, 1000);
   </script>
</body>
</html>

Dans cet exemple, nous avons utilisé la bibliothèque JavaScript ECharts et défini un div nommé "chart" pour afficher le graphique linéaire. Nous définissons également une minuterie pour mettre à jour les données du graphique toutes les 1 seconde.

Insérer les données de test

Enfin, nous devons insérer des données de test dans la base de données pour tester si l'ensemble du système fonctionne correctement. Dans cet exemple, nous insérerons 100 données générées aléatoirement dans la table « data ».

Vous pouvez utiliser le code suivant pour insérer des données par lots :

<?php

// 连接数据库
$host = 'localhost';
$user = 'root';
$password = '';
$database = 'stats';
$mysqli = new mysqli($host, $user, $password, $database);
if ($mysqli->connect_error) {
   die('Connect Error(' . $mysqli->connect_errno . ') ' . $mysqli->connect_error);
}

// 插入测试数据
for ($i = 1; $i <= 100; $i++) {
   $value = rand(1, 100);
   $time = date('Y-m-d H:i:s', strtotime('-' . $i . ' seconds'));
   $query = "INSERT INTO data (value, time) VALUES ('$value', '$time')";
   $result = $mysqli->query($query);
}

// 关闭数据库连接
$mysqli->close();

?>

3. Résumé

Grâce au processus d'implémentation ci-dessus, nous pouvons utiliser l'interface php et ECharts pour générer des graphiques statistiques en temps réel mis à jour dynamiquement. Dans les applications pratiques, nous pouvons l'ajuster et le modifier en fonction de besoins spécifiques pour répondre à différents besoins de visualisation de données.

Dans l'ensemble, la combinaison de l'interface PHP et d'ECharts peut nous aider à obtenir une visualisation des données plus flexible et dynamique, en fournissant des outils fiables et un support pour l'analyse des données et la prise de décision.

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!

php JavaScript mysql json echarts html 接口数据库 apache 数据分析

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：PHP et WebSocket : une approche optimisée de la messagerie instantanéeArticle suivant：PHP et WebSocket : une approche optimisée de la messagerie instantanée

Articles Liés

Voir plus