如何在时间图中绘制数组元素，每5秒显示一个值

// 引入Chart.js库
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

// 创建一个canvas元素，用于绘制时间图
<canvas id="myChart"></canvas>

// 准备要绘制的数组数据
var arr = [1, 2, 3, 4, 5];

// 创建时间图对象
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: [],
        datasets: [{
            label: 'Array Values',
            data: [],
            backgroundColor: 'rgba(0, 123, 255, 0.5)',
            borderColor: 'rgba(0, 123, 255, 1)',
            borderWidth: 1
        }]
    },
    options: {
        responsive: true,
        scales: {
            x: {
                display: true,
                title: {
                    display: true,
                    text: 'Time'
                }
            },
            y: {
                display: true,
                title: {
                    display: true,
                    text: 'Value'
                }
            }
        }
    }
});

// 设置定时器，每5秒更新一次图表
var index = 0;
setInterval(function() {
    // 获取数组中的下一个值
    var value = arr[index];
    
    // 将新的值添加到时间图中
    chart.data.labels.push(new Date().toLocaleTimeString());
    chart.data.datasets[0].data.push(value);
    
    // 更新图表
    chart.update();
    
    // 增加索引，循环遍历数组
    index = (index + 1) % arr.length;
}, 5000);