自動的に更新されるリアルタイム統計グラフを PHP と Vue.js で実装する方法

PHP および Vue.js で自動的に更新されるリアルタイム統計グラフを実装する方法

前書き:
リアルタイム統計グラフは、多くの Web サイトや Web サイトにとって重要です。アプリケーションにとって非常に重要な機能の 1 つです。開発中に、PHP と Vue.js は広く使用される 2 つのツールのうちの 1 つです。この記事では、PHPとVue.jsを組み合わせて、リアルタイム統計グラフを自動更新する機能を実現する方法を紹介します。

ステップ 1: 環境をセットアップする

まず、PHP と Vue.js がインストールされていることを確認し、基本的な開発環境をセットアップします。 XAMPP またはその他の関連ツールを使用して、ローカル環境をセットアップできます。

ステップ 2: データベースを作成する

統計データを保存するデータベースが必要です。 MySQL に「chart_data」という名前のデータベースを作成し、「data」という名前のテーブルを作成します。テーブル構造は次のとおりです。

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

ステップ 3: PHP コードを記述する

次に、データの取得と更新を処理する PHP コードを記述する必要があります。 「chart_data.php」というファイルを作成し、次のコードを追加します。

<?php

// 建立数据库连接
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "chart_data";

$conn = mysqli_connect($servername, $username, $password, $dbname);

if (!$conn) {
    die("Connection failed: " . mysqli_connect_error());
}

// 获取最新的统计数据
$sql = "SELECT * FROM data ORDER BY timestamp DESC LIMIT 10";
$result = mysqli_query($conn, $sql);
$rows = [];

if (mysqli_num_rows($result) > 0) {
    while ($row = mysqli_fetch_assoc($result)) {
        $rows[] = $row;
    }
}

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

// 关闭数据库连接
mysqli_close($conn);

ステップ 4: Vue.js コードを記述する

HTML ファイルに表示を追加します。 グラフの要素:

<div id="chart"></div>

次に、「app.js」という名前の Vue.js ファイルを作成し、次のコードをそれに追加します。

new Vue({
    el: '#chart',
    data: {
        chartData: []
    },
    mounted() {
        // 获取初始的统计数据
        this.fetchChartData();

        // 使用定时器每隔 5 秒更新一次统计数据
        setInterval(() => {
            this.fetchChartData();
        }, 5000);
    },
    methods: {
        fetchChartData() {
            // 通过 AJAX 获取统计数据
            axios.get('chart_data.php')
                .then(response => {
                    this.chartData = response.data;
                    this.updateChart();
                })
                .catch(error => {
                    console.log(error);
                });
        },
        updateChart() {
            // 使用第三方的图表插件更新图表
            // 这里假设你已经引入了一个名为 'Chart' 的图表库
            Chart.update('my-chart', {
                data: {
                    labels: this.chartData.map(data => data.timestamp),
                    datasets: [{
                        label: '统计数据',
                        data: this.chartData.map(data => data.value)
                    }]
                }
            });
        }
    }
});

ステップ 5: テスト

これで、次のことが可能になります。ブラウザで HTML ファイルを開くと、空白のグラフ領域が表示されます。 5 秒ごとに、グラフは最新の統計情報で更新されます。

結論:

PHP と Vue.js を組み合わせることで、自動更新されるリアルタイム統計グラフ機能を実装できます。 PHP はデータベースからの読み取りを処理するために使用され、Vue.js はバックエンドからデータを取得するために使用され、サードパーティのグラフ作成ライブラリはグラフの更新に使用されます。この記事があなたの開発実践に役立つことを願っています。

以上が自動的に更新されるリアルタイム統計グラフを PHP と Vue.js で実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。