大屏数据展示平台体验

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实时数据展示</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <canvas id="myChart" width="400" height="200"></canvas>
    <script>
        const ctx = document.getElementById('myChart').getContext('2d');
        const myChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: [],
                datasets: [{
                    label: '实时数据',
                    data: [],
                    borderColor: 'rgb(75, 192, 192)',
                    tension: 0.1
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });

        function updateChart(newData) {
            myChart.data.labels.push(new Date().toLocaleTimeString());
            myChart.data.datasets[0].data.push(newData);
            myChart.update();
        }

        setInterval(() => {
            fetch('/api/realtime-data')
                .then(response => response.json())
                .then(data => updateChart(data.value));
        }, 1000);
    </script>
</body>
</html>