ApexCharts中tickPlacement:on致tooltip格式化异常的修复咨询

问题描述 #

保留xaxis配置中的tickPlacement: 'on'时，tooltip的日期格式化异常显示为Dec 1969；移除该配置后tooltip显示正常，但会丢失因设置range:10而需要的横向滚动工具栏（默认显示最近10条数据）。

原配置代码 #

X轴配置 #

xaxis: {
  type: 'category',
  tickPlacement: 'on',
  range: 10, 
  labels: {
    show: true,              
    formatter: function(val) {
      return dayjs(val).format("MMM")
    }
  },
  group: {
    style: {
      fontSize: '10px',
      fontWeight: 700
    },
    //groups: [{ title: '2023', cols: 3 },{ title: '2024', cols: 7 }]
    groups: <?php echo $mos_cnt_response;?>
 }
},

Tooltip配置 #

tooltip: {
  x: {
    formatter: function(val) {
      return dayjs(val).format("MMM") + " " + dayjs(val).format("YYYY")
    }  
  }
},

问题原因 #

开启tickPlacement: 'on'后，tooltip的val参数不再传递原始的日期字符串，而是被转换为了索引或无效的标识值，导致dayjs无法解析有效日期，最终返回Unix时间戳起始点的默认显示（Dec 1969是UTC时区下1970-01-01的前一天）。

修复方案 #

方案1：通过上下文参数获取原始日期值 #

修改tooltip的x轴formatter，利用ApexCharts提供的上下文（ctx）参数，从数据点中直接获取原始日期值，而非依赖传入的val：

tooltip: {
  x: {
    formatter: function(val, ctx) {
      // 从上下文获取对应数据点的原始X轴日期值
      const originalDate = ctx.seriesX[ctx.dataPointIndex];
      return dayjs(originalDate).format("MMM YYYY");
    }  
  }
},

此方法既能保留tickPlacement: 'on'的效果，又能让tooltip正确解析日期，同时维持range:10带来的横向滚动工具栏。

方案2：确保数据点携带完整日期信息 #

如果你的数据系列是对象格式（包含x和y字段），可以直接从数据点中提取日期：

// 示例数据格式
series: [{
  name: '统计数据',
  data: [
    {x: '2023-01-01', y: 120},
    {x: '2023-02-01', y: 150},
    // 更多数据...
  ]
}]

// 修改后的tooltip配置
tooltip: {
  x: {
    formatter: function(val, ctx) {
      return dayjs(ctx.dataPoint.x).format("MMM YYYY");
    }  
  }
},

方案3：检查分组配置的有效性 #

确认<?php echo $mos_cnt_response;?>生成的groups结构是否正确，避免分组逻辑替换了x轴的原始日期值，导致tick传递的内容无法被dayjs解析。

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