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

问题描述

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

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

  let newArr = [
    { at: 1618799105371, metric: 'Patrick', unit: 'kg', value: 90 },
    { at: 1618799105371, metric: 't-shirt', unit: 'pz', value: 11.99 },
    { at: 1618799105371, 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>
  );

预期输出：图像

标签： reactjsrecharts

所以你正在寻找添加线条和 Y 轴？对于需要添加“Line”组件的行

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

您可以尝试映射您的“newArr”并创建自己的 Line forEach。

对于 YAxis 的问题，可以看看这个。或者，如果您向下滚动并将YAxis上的“方向”更改为“左”，则查看此代码框，它会给出您正在寻找的结果。

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

问题描述

解决方案

推荐阅读