Ant Design Charts时区适配问题：图表显示无数据空白区域求助

问题分析 #

你的折线图末尾出现空白，核心原因是：

• 数据时间为UTC时区（如示例中的2024-01-17T10:30:00.000Z），本地时区为-3小时，图表仅在标注时转换为本地时区显示，但x轴范围基于UTC时间计算。
• 当前代码手动设置了xAxis.max为数据中最大的UTC时间戳，同时Ant Design Charts的x轴默认开启nice属性（自动调整刻度到美观的整点/分界点），导致x轴范围被自动扩展到超出实际数据对应的本地时间范围，从而出现空白区域。

解决方案 #

方案1：禁用x轴的自动刻度扩展（推荐） #

直接在xAxis配置中添加nice: false，关闭自动调整刻度范围的功能，让x轴严格以数据中的最大时间为终点：

修改代码中的xAxis部分：

xAxis: {
  max: Math.max(
    ...data.map((item) => new Date(item.time as string).getTime()),
  ),
  type: 'time',
  nice: false, // 新增：禁用自动扩展刻度范围
  label: {
    style: {
      fontSize: isSmall ? 8 : 12,
      fill: ui?.['color-text-normal'],
    },
  },
},

方案2：移除手动设置的x轴最大值 #

如果不需要强制限制x轴范围，可以直接删除xAxis.max的配置，让图表自动根据数据计算合适的x轴范围：

修改后的xAxis：

xAxis: {
  type: 'time',
  label: {
    style: {
      fontSize: isSmall ? 8 : 12,
      fill: ui?.['color-text-normal'],
    },
  },
},

方案3：将数据时间转换为本地时区后传入图表 #

把原始的UTC时间转换为本地时区的时间，让图表基于本地时间计算x轴范围，从根源上避免时区差异问题：

在组件中先处理数据：

// 在defaultConfig之前添加数据处理逻辑
const processedData = useMemo(() => {
  return data.map(item => {
    const utcDate = new Date(item.time as string);
    // 转换为本地时区的时间（抵消时区偏移）
    const localDate = new Date(utcDate.getTime() + utcDate.getTimezoneOffset() * 60000);
    return {
      ...item,
      time: localDate.toISOString(),
    };
  });
}, [data]);

// 之后将defaultConfig中的data替换为processedData
const defaultConfig: LineConfig = {
  data: processedData,
  // ...其他配置
};

同时，由于time已经是本地时区时间，meta.time.formatter无需额外时区转换，保持原有逻辑即可。

验证效果 #

应用上述任意方案后，图表的x轴范围会与实际数据的时间范围匹配，末尾的空白区域会被消除。

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