前端如何格式化日期：Cube的React(recharts)集成场景自定义日期显示

方案1：Cube 数据模型层配置（推荐） #

在Cube的时间维度定义中直接配置周粒度和格式化规则，前端无需额外适配即可拿到符合要求的格式：

// 你的Cube模型文件
cube(`Orders`, {
  sql: `SELECT * FROM orders`,
  dimensions: {
    createdWeek: {
      // 根据你使用的数据库调整SQL语法，PostgreSQL用DATE_TRUNC，MySQL可改用WEEK()函数
      sql: `DATE_TRUNC('week', ${TABLE}.created_at)`,
      type: `time`,
      granularity: `week`,
      format: {
        label: (isoDate) => {
          const date = new Date(isoDate);
          // 计算当前日期属于当年的第几周
          const weekNumber = Math.ceil((date - new Date(date.getFullYear(), 0, 0)) / (1000 * 60 * 60 * 24 * 7));
          return `Week ${weekNumber}`;
        }
      }
    }
  }
})

配置完成后，查询Orders.createdWeek维度返回的结果会直接是Week XX格式。

方案2：React Recharts 前端层格式化 #

如果无需修改Cube模型，可以直接在Recharts的坐标轴渲染逻辑中处理：

方式A：借助date-fns工具库（简洁不易出错） #

import { format } from 'date-fns';
import { XAxis } from 'recharts';

// 图表X轴配置
<XAxis
  dataKey="yourTimeDimensionField" // 替换为你的时间维度字段名
  tickFormatter={(isoDate) => {
    const weekNum = format(new Date(isoDate), 'w');
    return `Week ${weekNum}`;
  }}
/>

方式B：原生JS实现（无第三方依赖） #

// 周数计算工具函数，可根据业务调整周起始日（默认周一为周起始）
const getWeekNumber = (date) => {
  const utcDate = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
  const weekDay = utcDate.getUTCDay() || 7;
  utcDate.setUTCDate(utcDate.getUTCDate() + 4 - weekDay);
  const yearStart = new Date(Date.UTC(utcDate.getUTCFullYear(), 0, 1));
  return Math.ceil((((utcDate - yearStart) / 86400000) + 1) / 7);
}

// 图表X轴配置
<XAxis
  dataKey="yourTimeDimensionField"
  tickFormatter={(isoDate) => `Week ${getWeekNumber(new Date(isoDate))}`}
/>

注意事项 #

• 周数计算存在不同的地区标准，可根据业务需求调整工具函数中的周起始日规则
• 若需要展示年份关联周，比如2021-W39，直接在返回的字符串中拼接年份字段即可

内容的提问来源于stack exchange，提问作者programmer.john.may