Highcharts样条图如何按指定日期区间显示数据并校准x轴刻度起止位置

解决方法 #

Highcharts默认会为X轴自动添加前后留白、自动适配刻度对齐规则，才会出现早于数据起始日期的11号刻度，按以下配置修改即可实现X轴刻度从12号开始、18号结束：

• 配置1：设置X轴的min和max为你所选日期区间的首尾时间戳，动态区间场景下直接读取用户选择的起止时间转成时间戳赋值即可
• 配置2：将minPadding和maxPadding设为0，取消X轴首尾默认的空白留白
• 配置3：可按需设置tickInterval为86400000（即1天的毫秒数），强制X轴按天显示刻度，避免自动计算刻度出现异常

xAxis: {
  type: 'datetime',
  // 直接赋值你当前的日期区间起止，动态场景下替换成用户选择的起止时间戳即可
  min: Date.UTC(2021,8,12),
  max: Date.UTC(2021,8,18),
  minPadding: 0,
  maxPadding: 0,
  tickInterval: 24 * 3600 * 1000, // 按天显示刻度
  // 其余原有配置保留即可
}

如果不需要严格固定X轴范围，只希望刻度自动匹配数据首尾，也可以只保留minPadding: 0和maxPadding: 0两项配置，无需硬设min和max，也能实现刻度和数据范围对齐的效果。

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