ApexCharts：datetime类型X轴显示当日全时段且仅展示有效数据

要实现需求，只需通过强制X轴时间范围+保留原有有效数据的组合配置即可，具体步骤如下：

1. 计算当日时间范围的时间戳 #

ApexCharts的datetime轴基于毫秒级时间戳，先获取当日00:00和23:59:59的时间戳：

// 当日00:00:00.000的时间戳
const startOfDay = new Date();
startOfDay.setHours(0, 0, 0, 0);
const startTs = startOfDay.getTime();

// 当日23:59:59.999的时间戳
const endOfDay = new Date();
endOfDay.setHours(23, 59, 59, 999);
const endTs = endOfDay.getTime();

2. 配置X轴范围 #

在图表的options.xaxis中指定min和max为上述时间戳，同时保留type: 'datetime'：

options: {
  xaxis: {
    type: 'datetime',
    min: startTs, // 强制X轴起始为当日0点
    max: endTs,   // 强制X轴结束为当日23:59:59
    // 可选：优化时间刻度显示格式
    labels: {
      format: 'HH:mm',
      rotate: -45
    }
  },
  // 其他图表配置（如y轴、主题等）
}

3. 保留原有有效数据 #

你的数据系列只保留16:30-17:05的有效数据点即可，不需要补充空值或无效数据：

series: [
  {
    name: '业务数据',
    data: [
      [new Date('2024-05-20T16:30:00').getTime(), 120],
      [new Date('2024-05-20T16:40:00').getTime(), 150],
      [new Date('2024-05-20T16:55:00').getTime(), 180],
      [new Date('2024-05-20T17:05:00').getTime(), 140]
    ]
  }
]

关键说明 #

• 强制X轴min/max后，图表会固定显示当日全时段范围；
• 由于仅提供有效时段的数据点，ApexCharts会自动只在有数据的区间绘制图形，无数据的区域不会生成线条或柱状图；
• 如果使用折线图，确保不要设置connectNulls: true（默认就是false），避免无数据区域被连线填充。

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