如何让Nivo ResponsiveBar图表X轴月份按1-12月顺序排列？

要让X轴月份按一月至十二月的顺序排列，核心是打破字符串默认的字典排序逻辑，指定明确的月份顺序。以下是两种可行方案：

方案一：预处理排序数据源 #

先对API返回的原始数据按指定月份顺序排序，再传给组件：

1. 定义标准月份顺序数组（根据你实际的月份字符串格式调整，比如是英文全称/缩写、中文等）：

// 示例：英文全称的月份顺序
const monthOrder = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
// 如果是中文则改为：
// const monthOrder = ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"];

2. 对数据进行排序：

// 复制原数组避免修改原始数据
const sortedData = [...data].sort((a, b) => {
  return monthOrder.indexOf(a.month) - monthOrder.indexOf(b.month);
});

3. 将排序后的数据传入组件：

return(
  <ResponsiveBar
    data={sortedData} // 替换为排序后的数组
    keys={['purchases']}
    indexBy="month"
    axisBottom={{
      tickSize: 0,
      tickPadding: 10,
      tickRotation: 0,
      legend: 'Month',
      legendPosition: 'middle',
      legendOffset: 50
    }}
  />
);

方案二：通过Nivo的scale配置指定X轴顺序 #

直接在ResponsiveBar组件中配置X轴的刻度域（domain），强制指定月份顺序，无需修改原始数据：

return(
  <ResponsiveBar
    data={data}
    keys={['purchases']}
    indexBy="month"
    // 添加scale配置指定X轴顺序
    scale={{
      x: {
        type: 'ordinal',
        domain: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
        // 中文环境替换为对应中文月份数组
      }
    }}
    axisBottom={{
      tickSize: 0,
      tickPadding: 10,
      tickRotation: 0,
      legend: 'Month',
      legendPosition: 'middle',
      legendOffset: 50
    }}
  />
);

注意事项 #

• 确保monthOrder或scale.x.domain中的月份字符串，和你DataResponse里month字段的格式完全一致（比如大小写、缩写/全称），否则排序或刻度匹配会失效。
• 如果你的数据包含多个年份，建议同时结合year字段排序，避免跨年份的月份混排。

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