如何在PHP和Vue.js中實現自動更新的即時統計圖表

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;

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

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

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