ChartistJS时间类型X轴自定义区间与刻度显示异常问题

需求说明 #

开发Y轴为数值、X轴为4位军事格式时间的动态图表，两轴上下限均通过JS动态设置，要求：

• X轴刻度范围为09:00~22:00，每20分钟展示一个刻度
• 数据点可落在1125、1743等非刻度时间点上，位置显示准确

初始异常表现 #

仅能实现刻度正确或数据点位置正确，无法二者兼得，初始配置（数据点位置正确但X轴异常）如下：

axisX: {
    type: Chartist.AutoScaleAxis,
    labelInterpolationFnc: function(value) {
      return moment(value).format('HHmm');
    },
    showLabel: true,
    showGrid: true,
    stretch: true
},

后续参数设置代码：

vm.chartOptions.axisX.ticks = tickArray;
vm.chartOptions.axisX.divisor = totalTicks;
vm.chartData.series = vm.chartSeries;

其中tickArray为预设刻度数组[0900, 0920, 0940, ...]，vm.chartSeries数据格式如下：

0: {x: Fri Aug 06 2021 14:03:00 GMT-0500 (Central Daylight Time), y: 15}
1: {x: Fri Aug 06 2021 18:00:00 GMT-0500 (Central Daylight Time), y: 35}
2: {x: Fri Aug 06 2021 22:30:00 GMT-0500 (Central Daylight Time), y: 42}

此配置下X轴从1357开始，按10/11分钟交替递增，仅覆盖到比最后一个数据点稍大的位置，未按设置的0900到2200范围展示，尝试将时间处理为纯数字、使用第三方自定义插件等方案均无效。

中间调整过程的问题 #

• 第一次调整后：X轴刻度样式符合要求，但区间仅覆盖首个数据点前到末尾数据点后，忽略了0900到1400的区间，也未延伸到预设的最终刻度。
• 第二次调整后：X轴全区间显示正常，但所有数据点都被挤压到图表中间。

最终解决方案 #

定位到问题根源为low和high参数配置错误，修正两个参数为对应X轴范围的最小、最大时间值后，刻度范围、数据点位置均显示正常。

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