如何移除时间线图表X轴上无对应数据序列的无效时间刻度？

解答 #

针对你的需求有两种更简便的实现方案，不需要手动逐个添加自定义刻度：

方案1：锁定X轴显示区间（适合仅需剪掉首尾空白区间的场景） #

你可以先提取所有数据点的时间戳的最小、最大值，直接将X轴的显示范围限定在数据覆盖的区间内即可，代码示例如下：

// 替换yourDataPoints为你的实际数据数组，timestamp为数据点的时间字段
const allTimestamps = yourDataPoints.map(item => item.timestamp)
const minTime = Math.min(...allTimestamps)
const maxTime = Math.max(...allTimestamps)
// 第四个参数设为true可以避免后续自动缩放覆盖你设置的区间
this.chart.getDefaultAxisX().setInterval(minTime, maxTime, false, true)

方案2：改用分类轴刻度策略（适合需要删掉所有中间空窗期的场景） #

如果你的数据存在大量中间空窗，不想让这些空窗占用轴的显示空间，可以直接将时间维度转换为分类标签，只展示有数据的时间点：

// 先将所有数据点的时间转换为你需要显示的时间字符串
const timeLabels = yourDataPoints.map(item => formatDate(item.timestamp))
// 配置X轴为分类轴，传入刚才生成的标签数组
this.chart.getDefaultAxisX()
  .setTickStrategy(AxisTickStrategies.Category, strategy => strategy
    .setCategories(timeLabels)
  )

采用这个方案时，你原本数据点的X坐标要对应替换为分类标签的索引（即第一个数据点X为0，第二个为1，依此类推）即可。

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