React中Nivo流图axisBottom自定义标签配置问题

Nivo的ResponsiveStream默认会用数据数组的索引（0、1、...）作为X轴刻度值，要替换成自定义标签，有两种可行方案：

方案1：给数据添加自定义X字段 #

直接在每个数据对象中加入x字段，填入你想要显示的标签文本，组件会自动读取这个字段作为X轴基准值并显示对应标签：

const data = [
  {
    x: "当前值",
    cxp_differnce: 600,
    cxp_utilized: 1000,
  },
  {
    x: "对比值",
    cxp_differnce: 7000,
    cxp_utilized: 3000,
  }
];

之后组件的axisBottom可保持原有配置，无需额外修改，X轴就会显示你定义的x字段文本。

方案2：通过axisBottom的format函数映射索引 #

如果不想修改原始数据，可以在axisBottom配置中，利用tick.format函数将默认索引值（0、1）映射为自定义标签：

<ResponsiveStream
  data={data}
  keys={['cxp_utilized', 'cxp_differnce']}
  margin={{ top: 50, right: 50, bottom: 50, left: 50 }}
  axisTop={null}
  axisRight={null}
  isInteractive={false}
  curve="linear"
  axisBottom={{
    tick: {
      format: (value) => {
        const customLabels = ["当前数据", "对比数据"];
        return customLabels[value];
      }
    }
    // 保留你原有的其他axisBottom配置
  }}
  axisLeft={{
    // 你的原有配置
  }}
  colors={['#CFF295', '#939393']}
  legends={[]}
/>

两种方案任选其一即可：方案1更适合数据本身带有分类标识的场景，方案2适合快速适配现有数据结构的需求。

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