如何在 rechart 的 y 轴上给出字符串值

Question

我正在研究 Recat.js 并使用 rechart 库来实现图表。我想在 y 轴上给出字符串值作为标签，并在 x 轴的 json 数据中包含的一些数字上进行训练。我在这里给出我的代码，我不知道为什么它不能正常工作。值键对必须通过 x 轴和 y 轴上的标签值。但它不工作。请帮我解决这个问题。我正在提供我的代码

  "timestamp": 1645727400000,
  "value": 1,
  "label":"connection_recovered"
  },
  {
  "timestamp": 1645790232297,
  "value": 2,
  "label":"up"
  },
  {
  "timestamp": 1645790232297,
  "value": -2,
  "label":"down"
  },
  {
  "timestamp": 1645790232297,
  "value": 2,
  "label":"up"
  },
  {
  "timestamp": 1645790232297,
  "value": -2,
  "label":"down"
  }]

 return (
    <Container lg={6}>
    <ResponsiveContainer aspect="3">
      <AreaChart
      width={500}
      height={400}
      data={data}
      margin={{
        top: 10,
        right: 30,
        left: 0,
        bottom: 0,
      }}
    >
      <CartesianGrid strokeDasharray="3 3" />
      
      <XAxis style={{fontSize:"12px"}} dataKey="timestamp" />
      
      
      <YAxis dataKey="label" type="category" />
      <Tooltip  />
      <defs>
        <linearGradient id="splitColor" x1="0" y1="0" x2="0" y2="1">
          <stop offset={off} stopColor="green" stopOpacity={1} />
          <stop offset={off} stopColor="red" stopOpacity={1} />
        </linearGradient>
      </defs>
      <Area style={{fontSize:"12px"}}
        type="monotone"
        dataKey="value"
        stroke="#000"
        fill="url(#splitColor)"
      />
     
    </AreaChart>
    </ResponsiveContainer>
    </Container>
    
  );
}

Answer 1

在您的数据数组中，我假设

的值

2 将始终具有 "up" 标签，
1 "connection_recovered" 标签和
-2 "down" 标签。

为了让标签在 YAxis 图表中的固定刻度上，您可以使用 tickFormatter 属性，您可以在其中传递一个函数，该函数可以 return 您想要的标签值。

它将给出以下内容：

// Depending on the value of the tick, you'll have a different label
function formatYAxis(value: number) {
  switch(value) {
    case 2:
      return "up";
    case -2:
      return "down";
    case 1:
      return "connection_recovered";
    default:
      return ""
  }
}

像这样在Y轴中使用：

<YAxis tickFormatter={formatYAxis} />

这会给出如下图

如何在 rechart 的 y 轴上给出字符串值

how to give string value on y axis in rechart

javascript

reactjs

graph

charts

recharts