在 Recharts 中,如何更改 y 轴刻度标签?

In Recharts, how do I change the y-axis tick labels?

我有以下图表:

<ResponsiveContainer width="100%" height={300}>
  <LineChart data={displayData}>
    <XAxis
      dataKey="date"
    />
    <YAxis
      interval="preserveStartEnd"
      domain={[0, domainMax]}
    />
    <Line
      type="linear"
      dataKey={key}
    />
  </LineChart>
</ResponsiveContainer>

在大多数情况下,这很好,并且 y 轴显示了适当范围的刻度线。但是,对于一种特定类型的数据,我需要对其进行更改。如果我有这种类型(由一个名为 'itemType' 的变量表示),那么所有数据值都将是 0 或 1;我希望 y 轴标签为“否”(而不是 0)和“是”(而不是 1)。

我假设我可以使用“tick”的自定义值来做到这一点,例如

 <YAxis interval="preserveStartEnd" domain={[0,domainMax]} tick={<CustomYAxisTick type={itemType} />} />

哪里

CustomYAxisTick 是这样的:

const CustomYAxisTick= ({ x, y, payload, itemType }: any) => {
  if (itemType ==="BOOLEAN") {
    if(payload.value === 0) return <text>No</text>;
    if(payload.value === 1) return <text>Yes</text>;
    return null;
  }else {
    return (<text>{payload.value}</text>);
  }
})

但是当我尝试这样做时它不起作用(我为 x 轴设置了类似的东西,效果很好)。

有办法实现吗?基本上,如果 itemType 是 BOOLEAN,那么 y 轴刻度标签应该是“No”和“Yes”;否则它应该只是从 0 到最大值的数字。

我认为您会想要使用 tickFormatter 属性: https://recharts.org/en-US/api/YAxis#tickFormatter

您的 Y 轴应如下所示:

<YAxis interval="preserveStartEnd" domain={[0,domainMax]} tickFormatter={formatYAxis} />

其中 formatYAxis 是一个可能看起来像这样(或多或少)的函数:

function formatYAxis(value) {
  if(value === 0) return "No"
  if(value === 1) return "Yes"
  return value
}

您可能需要根据需要稍微更改一下,但我认为这基本上就是您所需要的。请注意,“值”参数隐式传递给函数。