Recharts 将 Y 轴设置为 YES 和 NO

Question

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

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

我没有post这里唯一的代码部分是文件顶部的导入。

这是图表


const data = [
  {yl: "YES",name: "p1",'X axis': 1,},
  {yl: "YES",name: "p2",'X axis': 1,},
  {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;

Answer 1

您需要添加 tickFormatter 属性来自定义它。 (Working codesandbox)

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

Recharts 将 Y 轴设置为 YES 和 NO

Recharts set Y-axis to YES and NO

reactjs

recharts