如何修改代码用真实设备状态数据定时更新水平条形图并限制条目数

核心需求 #

• 从变量current_array01.MTConnectStreams.Streams.DeviceStream.ComponentStream[8].Events.Execution读取设备状态（分为ACTIVE、STOPPED、INTERRUPTED三类）
• 每5秒拉取一次数据，将单时间戳扩展为[原时间戳, 原时间戳+5秒]的区间，确保条形图时间连续
• 图表最多保留100条状态记录，超出时自动删除最旧条目

修改步骤与完整代码 #

1. 替换空数据结构 #

将原假数据替换为空数组，后续通过定时器动态填充数据

2. 新增时间处理工具函数 #

用于把原始时间戳转换为包含开始/结束时间的5秒区间

3. 实现定时拉取与数据维护逻辑 #

用setInterval每5秒执行一次数据拉取、处理、更新操作，同时控制数据条数不超过100

完整改造代码 #

// 时间处理工具：将原始时间戳转为[原时间戳, 原时间戳+5秒]的区间
function getTimeInterval(rawTimestamp) {
  const start = new Date(rawTimestamp);
  const end = new Date(start.getTime() + 5000); // 追加5秒
  // 转为Chart.js兼容的时间格式
  return [start.toISOString().slice(0, 19).replace('T', ' '), end.toISOString().slice(0, 19).replace('T', ' ')];
}

// 初始化空数据结构
const data = {
  labels: ['Status'],
  datasets: [{
    label: 'ACTIVE',
    data: [],
    backgroundColor: 'rgba(88,188,116,1)'
  },{
    label: 'STOPPED',
    data: [],
    backgroundColor: 'rgba(255,172,100,1)'
  },{
    label: 'INTERRUPTED',
    data: [],
    backgroundColor: 'rgba(195,40,96,1)'
  }]
};

// 图表配置（调整x轴为秒级显示，适配5秒短区间）
const config = {
  type: 'bar',
  data,
  options: {
    responsive: true,
    maintainAspectRatio: false,
    indexAxis: 'y',
    scales: {
      x: {
        type: 'time',
        time: {
          unit: 'second'
        },
        adaptsToData: true // 自动适配最新时间范围
      },
      y: {
        beginAtZero: true,
        stacked: true,
        ticks: {
          display: false,
        }
      }
    },
    plugins: {
      tooltip: {
        enabled: true,
        callbacks: {
          label: function(context) {
            const [start, end] = context.raw.x;
            return `${context.dataset.label}: ${start} ~ ${end}`;
          }
        }
      }
    },
    layout: {
      padding: {
        top: 10,
        right: 20,
        bottom: 10,
        left: 20
      }
    },
  }
};

// 初始化图表
const statusChart = new Chart(
  document.getElementById('statusChart01'),
  config
);

// 定时更新逻辑
const UPDATE_INTERVAL = 5000;
const MAX_RECORDS = 100;

setInterval(() => {
  // 读取真实数据
  const executionData = current_array01.MTConnectStreams.Streams.DeviceStream.ComponentStream[8].Events.Execution;
  if (!executionData || !executionData.__text) return;

  const status = executionData.__text;
  const timeRange = getTimeInterval(executionData._timestamp);

  // 找到对应状态的数据集
  const targetDataset = data.datasets.find(ds => ds.label === status);
  if (!targetDataset) return;

  // 添加新数据
  targetDataset.data.push({
    x: timeRange,
    y: 'Status'
  });

  // 控制数据条数：超出100条时移除最旧的
  if (targetDataset.data.length > MAX_RECORDS) {
    targetDataset.data.shift();
  }

  // 更新图表
  statusChart.update();
}, UPDATE_INTERVAL);

关键说明 #

• 时间处理：通过工具函数将原始ISO时间戳转换为5秒区间，保证每个状态条的时间长度统一
• 数据维护：每个状态数据集的data数组最多保留100条，超出时用shift()删除最前面的旧数据
• 图表适配：将x轴时间单位改为second，适配短时间区间展示；开启tooltip并自定义内容，方便查看具体时间范围
• 容错处理：添加了对executionData及__text字段的空值判断，避免无效数据导致报错

内容的提问来源于stack exchange，提问作者Empire Hive