PHP と Highcharts を使用してリアルタイムのデータ視覚化チャートを作成する

インターネット技術の継続的な発展に伴い、データ分析と視覚化は企業および個人のアプリケーションに不可欠な部分になりました。中でも、リアルタイムデータの可視化は比類のない重要性を示しています。これにより、ユーザーはデータの変更をリアルタイムで確認し、最大のメリットを得るために迅速な意思決定を行うことができます。

リアルタイムのデータ視覚化テーブルを表示するには、動的に描画できるツールが必要です。 Highcharts はそのようなツールとして強く推奨されます。同時に、PHP は非常に人気があり、習得が簡単な Web プログラミング言語です。したがって、PHP と Highcharts を併用して、リアルタイムのデータ視覚化チャートを作成できます。

まず、データを準備する必要があります。リアルタイムのデータ視覚化では、データの変更はいつでも発生します。したがって、ここではシミュレートされたデータ手法を使用します。乱数ジェネレーターを使用してデータを継続的に生成する PHP スクリプトを作成できます。データをシミュレートするコードは次のとおりです。

<?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);
}
?>

上記のコードでは、まず、Content-Type を text/event-stream に設定することで、これがイベント ストリームであることをブラウザーに伝えます。次に、データを送信するたびに、ブラウザとサーバー間のデータ交換を容易にするために、今回送信されたデータの ID を表す ID を送信します。最後に、データは sendMsg 関数を通じて送信されるため、データを継続的に生成してブラウザに送信できます。

次に、このデータをリアルタイムで取得して解析する方法が必要です。ここでは、JavaScript ライブラリである EventSource を選択しました。これは H5 の新しい API であり、主にイベント ストリームをブラウザにプッシュするサーバーを構築するために使用されます。以下は、EventSource を使用するためのコードです。

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

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

上記のコードでは、まず EventSource オブジェクトを作成し、接続するサーバーの URL を指定します。次に、onmessage イベント応答関数を設定します。サーバーがデータを送信すると、この関数がトリガーされ、データがパラメーターとして渡されます。その後、onmessage 関数でデータの表示などのデータ処理を実行できます。

最後に、Highcharts を使用してデータをグラフに視覚化する必要があります。 Highcharts は、線形グラフ、棒グラフ、円グラフなど、さまざまな種類のグラフを生成できるグラフ描画用の JavaScript ライブラリです。データを折れ線グラフに視覚化するコードは次のとおりです。

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);
  };
});

上記のコードでは、まず高度なグラフ オブジェクトを作成し、タイトル、軸、データ系列などの基本設定を追加します。次に、Document Ready イベントで、EventSource オブジェクトも作成し、サーバーから送信されたデータを処理するための onmessage イベント応答関数を設定しました。データを座標に変換し、その座標を折れ線グラフに追加し直します。

このように、PHP と Highcharts を使用して、リアルタイムのデータ視覚化チャートを作成できます。 PHP を使用してランダム データを生成し、このデータをリアルタイムでブラウザに送信します。次に、JavaScript で EventSource オブジェクトを使用してこのデータに応答し、Highcharts を使用してデータを折れ線グラフに視覚化します。このようにして、ユーザーがデータの変化をリアルタイムで確認できるようになり、ユーザーが分析可能なデータの効率が向上します。

以上がPHP と Highcharts を使用してリアルタイムのデータ視覚化チャートを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。