ApexChart rangeBar图表x轴设置00:00-24:00固定小时标签问题

解决方案 #

你之前修改为category类型不生效的原因是：rangeBar类型图表的区间数据依赖datetime类型的x轴做坐标映射，改为category后数据的时间戳无法和分类坐标匹配，因此配置失效。
正确实现步骤如下：

• 保留x轴type: "datetime"配置不变
• 强制固定x轴的时间范围为目标日期的00:00到24:00，避免图表自动按数据范围缩放坐标轴
• 自定义x轴标签格式化规则，将时间戳转换为HH:mm格式输出

修改后的完整配置如下：

const options = {
  chart: {
    type: "rangeBar",
  },
  series: [
    {
      data: [
        {
          x: "Code",
          y: [Date.UTC(2019, 3, 2, 12, 30), Date.UTC(2019, 3, 2, 13, 0)],
        },
        {
          x: "Code",
          y: [Date.UTC(2019, 3, 2, 15, 30), Date.UTC(2019, 3, 2, 16, 0)],
        },
        {
          x: "Code",
          y: [Date.UTC(2019, 3, 2, 18, 0), Date.UTC(2019, 3, 2, 19, 0)],
        },
        {
          x: "Code",
          y: [Date.UTC(2019, 3, 2, 22, 0), Date.UTC(2019, 3, 2, 24, 0)],
        },
      ],
    },
  ],
  plotOptions: {
    bar: {
      horizontal: true,
    },
  },
  xaxis: {
    type: "datetime",
    // 固定x轴范围为目标日期的00:00到24:00 UTC时间
    min: Date.UTC(2019, 3, 2, 0, 0),
    max: Date.UTC(2019, 3, 2, 24, 0),
    // 自定义标签格式为HH:mm
    labels: {
      formatter: function(val) {
        const date = new Date(val)
        const hour = String(date.getUTCHours()).padStart(2, '0')
        const minute = String(date.getUTCMinutes()).padStart(2, '0')
        return `${hour}:${minute}`
      }
    },
    // 可选：设置刻度数量为24，每小时显示一个刻度
    tickAmount: 24
  },
};

如果你的数据涉及跨天场景，需要先把所有区间的时间戳统一转换为同一天的UTC时间，仅保留时分部分即可正常显示。

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