Chartjs实时图形x轴移动

// 引入Chart.js库
import Chart from 'chart.js';

// 创建图表实例
const chart = new Chart(document.getElementById('myChart'), {
  type: 'line',
  data: {
    labels: [], // x轴标签，初始为空数组
    datasets: [{
      label: '实时数据',
      data: [], // y轴数据，初始为空数组
      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: '时间'
        }
      },
      y: {
        display: true,
        title: {
          display: true,
          text: '数值'
        }
      }
    }
  }
});

// 更新函数
function updateChart() {
  // 获取最新数据
  const newData = getRandomData();

  // 更新x轴标签
  chart.data.labels.push(newData.label);

  // 更新y轴数据
  chart.data.datasets[0].data.push(newData.value);

  // 移除最旧的数据，保持x轴长度不变
  if (chart.data.labels.length > 10) {
    chart.data.labels.shift();
    chart.data.datasets[0].data.shift();
  }

  // 更新图表
  chart.update();
}

// 模拟获取实时数据的函数
function getRandomData() {
  const label = new Date().toLocaleTimeString(); // 当前时间作为x轴标签
  const value = Math.random() * 100; // 随机生成一个数值作为y轴数据
  return { label, value };
}

// 每秒更新一次图表
setInterval(updateChart, 1000);