使用Apexcharts的appendData给3个序列加数据点时如何添加X轴值

你调用appendData方法时可以直接在第二个配置参数中传入对应X轴数值，无需单独调用其他API，具体用法按X轴类型区分如下：

类目型X轴（type: category） #

这种场景直接在配置参数中传入categories数组，数组长度要和每个序列新增的数据点数量一致，示例代码如下：

// 假设3个序列各追加2个数据点
chart.appendData([
  [12, 45], // 第一个序列的2个新增Y值
  [32, 27], // 第二个序列的2个新增Y值
  [19, 34]  // 第三个序列的2个新增Y值
], {
  categories: ["2024-05-01", "2024-05-02"] // 同步新增的2个X轴类目标签
})

时间型X轴（type: datetime） #

这种场景直接在配置参数中传入xaxis数组，数组元素为对应时间点的毫秒级时间戳，长度和新增数据点数量一致，示例代码如下：

chart.appendData([
  [12, 45],
  [32, 27],
  [19, 34]
], {
  xaxis: [1714521600000, 1714608000000] // 对应两个时间点的毫秒级时间戳
})

注意事项 #

• 追加的X轴数值数量必须和每个序列新增的数据点数量完全一致，否则会出现X轴标签和数据点错位的问题
• 时间型X轴必须传入数值格式的时间戳，不要传入字符串格式时间，避免框架解析异常
• 如果需要追加数据后自动滚动展示最新数据，可以在初始化图表时配置xaxis.range属性，设置固定展示的X轴区间长度，追加数据后会自动偏移展示最新内容

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