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