Créez des graphiques de visualisation de données en temps réel à l'aide de PHP et Highcharts

Avec le développement continu de la technologie Internet, l'analyse et la visualisation des données sont devenues un élément indispensable des applications d'entreprise et personnelles. Parmi eux, la visualisation des données en temps réel montre son importance sans précédent. Il permet aux utilisateurs de voir les modifications des données en temps réel et de prendre des décisions rapidement pour obtenir les meilleurs avantages.

Afin de pouvoir présenter des tableaux de visualisation de données en temps réel, nous avons besoin d'un outil capable de dessiner dynamiquement. Highcharts est un tel outil fortement recommandé. En même temps, PHP est un langage de programmation Web très populaire et facile à apprendre. Par conséquent, nous pouvons utiliser PHP et Highcharts ensemble pour créer un graphique de visualisation de données en temps réel.

Tout d’abord, nous devons préparer les données. Dans la visualisation des données en temps réel, les modifications des données se produisent à tout moment. Par conséquent, nous utilisons ici une méthode de données simulées. Nous pouvons écrire un script PHP pour utiliser un générateur de nombres aléatoires afin de générer des données en continu. Voici le code pour simuler les données :

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

function sendMsg($id, $msg) {
  echo "id: $id
";
  echo "data: $msg
";
  echo "
";
  ob_flush();
  flush();
}

$i = 0;
while(true) {
    $data = rand(0, 100);
    sendMsg($i++, $data);
    sleep(1);
}
?>

Dans le code ci-dessus, nous indiquons d'abord au navigateur qu'il s'agit d'un flux d'événements en définissant le Content-Type sur text/event-stream. Ensuite, avant chaque envoi de données, nous enverrons un identifiant pour représenter l'identifiant des données envoyées cette fois-ci afin de faciliter l'échange de données entre le navigateur et le serveur. Enfin, les données sont envoyées via la fonction sendMsg, afin que les données puissent être générées en continu et envoyées au navigateur.

Ensuite, nous avons besoin d'un moyen d'obtenir et d'analyser ces données en temps réel. Ici nous avons choisi une bibliothèque JavaScript : EventSource. Il s'agit d'une nouvelle API dans H5, principalement utilisée pour créer un serveur permettant de transmettre les flux d'événements vers le navigateur. Voici le code pour utiliser EventSource :

$(document).ready(function() {
  var source = new EventSource("demo.php");
  source.onmessage = function(event) {
    var data = event.data;
    console.log(data);  // 打印数据到控制台

    // 在这里进行数据处理
  };
});

Dans le code ci-dessus, nous créons d'abord un objet EventSource et spécifions l'URL du serveur auquel il souhaite se connecter. Définissez ensuite la fonction de réponse à l'événement onmessage Lorsque le serveur envoie des données, cette fonction sera déclenchée et les données seront transmises en tant que paramètre. Ensuite, nous pouvons effectuer un traitement des données dans la fonction onmessage, comme l'affichage des données.

Enfin, nous devons utiliser Highcharts pour visualiser les données sous forme de graphiques. Highcharts est une bibliothèque JavaScript pour le dessin de graphiques qui peut générer différents types de graphiques, tels que des graphiques linéaires, des graphiques à barres, des diagrammes circulaires, etc. Voici le code pour visualiser les données dans un graphique linéaire :

var chart = Highcharts.chart('container', {
  chart: {
    type: 'line'
  },
  title: {
    text: '实时数据可视化'
  },
  xAxis: {
    type: 'datetime',
    tickPixelInterval: 150
  },
  yAxis: {
    title: {
      text: '数据'
    },
    plotLines: [{
      value: 0,
      width: 1,
      color: '#808080'
    }]
  },
  series: [{
    name: '数据',
    data: []
  }]
});

$(document).ready(function() {
  var source = new EventSource("demo.php");
  source.onmessage = function(event) {
    var data = event.data;
    console.log(data);  // 打印数据到控制台

    // 把数据转化成坐标
    var point = [new Date().getTime(), parseInt(data)];

    // 把坐标添加到图表中
    var series = chart.series[0];
    var shift = series.data.length > 20; // 确保图表上只有20个点
    series.addPoint(point, true, shift);
  };
});

Dans le code ci-dessus, nous créons d'abord un objet graphique avancé et ajoutons quelques paramètres de base tels que le titre, l'axe et la série de données. Ensuite, dans l'événement Document Ready, nous avons également créé un objet EventSource et configuré la fonction de réponse à l'événement onmessage pour traiter les données envoyées par le serveur. Nous convertissons les données en coordonnées et ajoutons les coordonnées au graphique linéaire.

De cette façon, nous pouvons utiliser PHP et Highcharts pour créer des graphiques de visualisation de données en temps réel. Nous utilisons PHP pour générer des données aléatoires et envoyer ces données au navigateur en temps réel. Utilisez ensuite l'objet EventSource en JavaScript pour répondre à ces données et visualisez les données dans un graphique linéaire via Highcharts. De cette manière, nous pouvons permettre aux utilisateurs de voir les changements dans les données en temps réel, améliorant ainsi l'efficacité des données analysables par l'utilisateur.

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!