如何在图表中显示自定义 YAxis？

问题描述

如何在图表中显示此对象数组和自定义 YAxis？ 我想为每个对象看到 1 个单独的行，我该怎么做？

我看不到图表中的线条，也看不到自定义 YAxis...

  let newArr = [
    { at: 1618799105371,metric: 'Patrick',unit: 'kg',value: 90 },{ at: 1618799105371,metric: 't-shirt',unit: 'pz',value: 11.99 },metric: 'waterTemp',unit: 'F',value: 24.39 },];


return (
    <ResponsiveContainer width='100%' height={500}>
      <AreaChart data={arrayN}>
        <Area dataKey="value" />
        <XAxis dataKey="at" />
        <YAxis dataKey="unit" />
      </AreaChart>
    </ResponsiveContainer>
  );

预期输出： image

解决方法

所以您要添加线条和 Y 轴？ 对于需要添加“Line”组件的行

<Line type="monotone" dataKey="pv" stroke="#8884d8" />
<Line type="monotone" dataKey="uv" stroke="#82ca9d" />

您可以尝试映射您的“newArr”并为Each创建自己的行。

有关 YAxis 的问题，请查看 this。 或者看看这个 codesandbox，如果你向下滚动并将 YAxis 上的“方向”更改为“左”，它会给出你正在寻找的结果。