Recharts 将 Y 轴设置为 YES 和 NO

问题描述

我需要更改哪些代码才能将 1 替换为 YES，将 0 替换为 NO？

似乎应该可以从 http://recharts.org/ 上的示例中找到它，或者只是从一般搜索中找到它，但是我没有找到任何可以解决此问题的方法。

我无法在下面发布我的所有代码，因为来自 stackoverflow 的此错误消息“看起来您的帖子主要是代码；请添加更多详细信息”。唯一缺少的部分代码是文件顶部的导入。

这是图表

const data = [
  {yl: "YES",name: "p1",'X axis': 1,},{yl: "YES",name: "p2",{yl: "NO",name: "p3",'X axis': 0,];
export const esChart: React.FC = () => {
  return (
    <LineChart
      width={500}
      height={300}
      data={data}
      margin={{
        top: 100,right: 30,left: 20,bottom: 5
      }}
    >
      <Cartesiangrid strokeDasharray="3 3" />
      <XAxis dataKey="name" />
      <YAxis tickCount={1} />
      <Tooltip />
      <Legend />
      <Line
        type="monotone"
        dataKey='X axis'
        stroke="#8884d8"
        activeDot={{ r: 8 }}
      />
    </LineChart>
  );
}

export default esChart;

解决方法

您需要添加 tickFormatter 道具来自定义相同的内容。 (Working codesandbox)

<YAxis tickCount={1} tickFormatter={(...allArgs)=>{ console.log(allArgs) if(allArgs[0] ===0){ return "Y" }else{ return "N" } }}/>