Am4Chart X轴字段处理：如何同时展示日期与时间

问题说明 #

Am4Chart图表数据包含日期和时间字段，但X轴仅展示日期维度，尝试修改dateFormats的setKey及数据中的date字段后未生效，需实现X轴同时显示日期与时间。

解决方案 #

1. 确保date字段为标准Date对象 #

后端返回的日期字符串需转换为前端可识别的Date对象，否则Am4Chart无法解析时间维度。修改数据处理代码：

vdata.push({
  value: 0,
  date: new Date(item.date), // 将后端返回的日期字符串转为Date对象
  aniFeed: item.aniFeed / 1000,
  aniFeedSet: data.length > 0 ? item.aniFeedSet / 1000 : 0,
  sumFeed: sum / 1000,
  disabled: isBulletLabelDisabled(prevValue, currentValue),
  time: item.moveInTimeReal.toString().substring(0, 5),
});

2. 配置X轴的日期格式与间隔 #

同时设置常规日期格式和周期切换格式，确保不同层级的刻度都能展示日期+时间信息：

var dateAxis = chartRef.current.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.grid.template.location = 0;
dateAxis.renderer.minGridDistance = 40; // 缩小刻度间距，避免重叠

// 设置不同时间单位的显示格式
dateAxis.dateFormats.setKey("day", "MM-dd HH:mm"); // 天级刻度显示日期+时间
dateAxis.dateFormats.setKey("hour", "HH:mm"); // 小时级刻度显示具体时间
dateAxis.dateFormats.setKey("minute", "HH:mm"); // 若数据粒度为分钟，可添加此配置

// 跨周期（如跨天）时的刻度格式
dateAxis.periodChangeDateFormats.setKey("day", "MM-dd HH:mm");

// 基础间隔设为小时，匹配数据时间粒度
dateAxis.baseInterval = {
  timeUnit: "hour",
  count: 1,
};

// 优化刻度位置，确保显示完整
dateAxis.startLocation = 0.5;
dateAxis.endLocation = 0.5;

3. 验证数据时间粒度 #

在控制台打印vdata，确认每个条目的date字段都包含具体时分信息。若数据时间间隔过大（如仅每天一个数据点），X轴会优先显示日期，需确保数据有小时级或更细的时间粒度。

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