如何实现ApexCharts实时图表沿X轴平移 最多显示5个X轴数据

你现有代码已经完成实时数据追加能力，只需两处调整就能实现目标效果：

• 给X轴增加固定可视范围约束，避免坐标轴随数据增加无限拉伸
• 维护固定长度的数据集，每次新增数据后丢弃最早的旧数据，配合图表自带的动态动画即可实现平滑平移效果。

具体修改方式 #

首先在原有options配置里新增xaxis字段，固定X轴可视窗口大小：

var options = {
  chart: {
    id: 'realtime',
    height: 350,
    type: 'line',
    animations: {
      enabled: true,
      easing: 'easeinout',
      speed: 1000,
      dynamicAnimation: {
        enabled: true,
        speed: 1000
      }
    }
  },
  // 新增X轴配置，固定可视范围为5个数据单位
  xaxis: {
    range: 5
  },
  dataLabels: {
    enabled: false
  },
  stroke:{
    curve: 'smooth'
  },
  // 其余原有配置保持不变
  series: [{
    name: "Sales",
    data: mData()
  }],
  title: {
    text: 'Ajax Example',
  },
  noData: {
    text: 'Loading...'
  }
}

然后替换原有定时器逻辑，用固定长度数组维护数据集，避免数据无限累加：

// 单独维护数据集变量，方便后续增删操作
let salesData = mData();

var chart = new ApexCharts(
  document.querySelector("#chart"),
  {...options, series: [{name: "Sales", data: salesData}]}
);
chart.render();

setInterval(function(){
  // 追加新采样数据
  const newPoint = mData()[0];
  salesData.push(newPoint);
  // 数据量超过5条时，删除最旧的头部数据
  if (salesData.length > 5) {
    salesData.shift();
  }
  // 开启动画更新图表，自动触发X轴平移过渡
  chart.updateSeries([{
    name: "Sales",
    data: salesData
  }], true);
}, 1000);

逻辑说明 #

• xaxis.range: 5会强制X轴可视窗口只展示5个单位长度的内容，不会随着数据增加自动拉宽坐标轴
• 数据集始终保持最多5条数据，配合已经开启的dynamicAnimation动画，新增数据时会自动生成左移的平滑过渡效果，和官方实时示例表现完全一致
• 如果后续需要调整展示的数值个数，只需要同步修改range的值和salesData.length的判断阈值即可，不需要改动其他逻辑

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