PHP と Vue.js を使用して統計グラフのリアルタイムデータ更新を実装するための完全なチュートリアル

M66 2025-10-13

PHPとVue.jsで統計グラフのデータ更新を実装する方法

データ分析と視覚化のニーズの高まりに伴い、Web アプリケーションで統計グラフが使用されることが増えています。 PHPとVue.jsを組み合わせることでリアルタイムなデータ表示を実現し、常に最新のデータ状況をグラフに反映させることができます。この記事では、導入プロセス全体を詳しく紹介します。

開発環境を準備する

始める前に、PHP および Vue.js 開発環境がインストールされていることを確認し、データインターフェイスを提供する PHP バックエンドサーバーとフロントエンド Vue.js アプリケーションを準備してください。

PHPデータインターフェースの作成

PHP バックエンドでは、グラフに必要なデータを提供するデータインターフェイスを作成する必要があります。 PDO または mysqli を使用してデータベースにアクセスし、クエリ結果を JSON 形式でフロントエンドに返すことができます。

<?php
// データベースに接続する
$pdo = new PDO('mysql:host=localhost;dbname=test', 'username', 'password');

// クエリデータ
$stmt = $pdo-> prepare("SELECT * FROM 統計");
$stmt->execute();
$data = $stmt->fetchAll(PDO::FETCH_ASSOC);

// JSON データ ヘッダーを戻るします(&#39;Content-Type: application/json&#39;);
エコー json_encode($data);
?>

上記のコードは、test という名前の MySQL データベースに接続し、統計テーブル内のすべてのデータをクエリし、それを JSON 形式でフロントエンドに返します。

Vue.js フロントエンドアプリケーションの構築

フロントエンドでは、Vue.jsを使用して統計グラフを表示し、リアルタイムでデータを更新します。まず、Vue.js および ECharts ライブラリを HTML に導入します。

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>

次に、Vue インスタンスでデータとメソッドを定義します。

<div id="app">
  <div ref="chart" style="width: 600px; height: 400px;"></div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    chart: null,
    data: []
  },
  mounted() {
    this.chart = echarts.init(this.$refs.chart);
    this.getData();
  },
  methods: {
    getData() {
      fetch('api.php') // 電話PHPインタフェース
        .then(response => response.json())
        .then(data => {
          this.data = data;
          this.updateChart();
        });
    },
    updateChart() {
      // チャートデータを更新するして再レンダリングする
      const option = {
        // チャート設定パラメータ
        series: [{
          data: this.data
        }]
      };
      this.chart.setOption(option);
    }
  }
});
</script>

上記のコードでは、Vue インスタンスには、チャートを表示するために使用される div 要素が含まれています。マウントされたライフサイクルフックで echarts インスタンスを初期化し、getData メソッドを呼び出してデータを取得します。 getData メソッドは、PHP インターフェイスを呼び出してフェッチを通じて JSON データを取得し、updateChart メソッドを呼び出してグラフを更新します。

リアルタイムのデータ更新

グラフにデータの変更をリアルタイムで反映させるために、タイマーを使用して getData メソッドを定期的に呼び出すことができます。

 setInterval(() => {
  this.getData();
}, 5000); // 52番ごとにデータを更新するします

このコードは、5 秒ごとに getData メソッドを実行してチャートデータを更新し、リアルタイムの表示効果を実現します。

要約する

この記事では、PHP と Vue.js を組み合わせて統計グラフのデータ更新を実装する方法を紹介します。 PHP でデータインターフェイスを提供し、フロントエンドで Vue.js と ECharts を使用してそれを表示することにより、開発者は動的でリアルタイムに更新されるデータ視覚化チャートを簡単に実装できます。この方法は柔軟で拡張が容易で、さまざまな種類のデータ統計シナリオに適しています。