Reactjs 如何使用recharts中的.map函数创建双轴线形图_Reactjs_Linechart_Recharts

Reactjs 如何使用recharts中的.map函数创建双轴线形图

reactjs

Reactjs 如何使用recharts中的.map函数创建双轴线形图,reactjs,linechart,recharts,Reactjs,Linechart,Recharts,所以基本上我有这些数据： const bodyWeightAndFatData = [ { name: 'salim', style:'#57c0e8', category:'Body Weight', data: [ { day: 23, value: 100 }, { day: 24, value: 101 }, { day: 25, value: 104 }, { day

所以基本上我有这些数据：

const bodyWeightAndFatData = [
    {
      name: 'salim',
      style:'#57c0e8',
      category:'Body Weight',
      data: [
        { day: 23, value: 100 },
        { day: 24, value: 101 },
        { day: 25, value: 104 },
        { day: 26, value: 107 },
        { day: 27, value: 108 },
        { day: 28, value: 105 },
        { day: 29, value: 106 },
        { day: 30, value: 107 },
        { day: 31, value: 107 },
      ],
    },
    {
      name: 'salim',
      style:'pink',
      category:'Fat Percentage',
      data: [
        { day: 23, value: 134 },
        { day: 24, value: 135 },
        { day: 25, value: 131 },
        { day: 26, value: 133 },
        { day: 27, value: 137 },
        { day: 28, value: 131 },
        { day: 29, value: 130 },
        { day: 30, value: 139 },
        { day: 31, value: 138 },
      ],
    },

  ];

来自一个组件。我从另一个组件上画了一个rechart，像这样：

<div className={styles.outer}>
      <div className={styles.inner}>
      <p className={styles.title}>Average Measurments</p>
        <ResponsiveContainer width="95%" height={300}>
        <LineChart >
        <CartesianGrid strokeDasharray="5 0" vertical={false} tickSize={10} padding={{ left: 20 }}/>
        <XAxis yAxisId="right" tickLine={false} axisLine={false} dataKey="day" allowDuplicatedCategory={false} />
        <YAxis tickCount={5} axisLine={false} dx={-15} dataKey="value"/>
        <Tooltip/>
        <Legend
        layout="horizontal" verticalAlign="top" align="center" 
        payload={
          props.data.map(
            item => ({
              type: "circle",
              id: item.name,
              color: item.style,
              value: `${item.category}`
            })
          )
        }/>
        {props.data.map(s => (
          <Line dataKey="value" data={s.data} name={s.name} key={s.category} stroke={s.style}/>
        ))}
      </LineChart>
      </ResponsiveContainer>
      </div>
      </div>


平均测量值
({
类型：“圆圈”，
id:item.name，
颜色：item.style，
值：`${item.category}`
})
)
}/>
{props.data.map（s=>(
))}

结果很好，它绘制了数据和所有东西，但我坚持的是，我需要显示两个Y轴，而不是只显示一个。我已经查过了，但我不知道如何使用创建它。有人能帮我吗？

以下是我如何创建它的

 const bodyWeightAndFatData = [
  {
    name: 'salim',
    style:'#57c0e8',
    category:'Body Weight',
    data: [
      { day: 23, value: 100 },
      { day: 24, value: 101 },
      { day: 25, value: 104 },
      { day: 26, value: 107 },
      { day: 27, value: 108 },
      { day: 28, value: 105 },
      { day: 29, value: 106 },
      { day: 30, value: 107 },
      { day: 31, value: 107 },
    ],
  },
  {
    name: 'salim',
    style:'pink',
    category:'Fat Percentage',
    data: [
      { day: 23, value: 134 },
      { day: 24, value: 135 },
      { day: 25, value: 131 },
      { day: 26, value: 133 },
      { day: 27, value: 137 },
      { day: 28, value: 131 },
      { day: 29, value: 130 },
      { day: 30, value: 139 },
      { day: 31, value: 138 },
    ],
  },

];



export default function App() {
  return (

    <div >
    <div >
    <p>Average Measurments</p>
      <ResponsiveContainer width="95%" height={300}>
      <LineChart >
      <CartesianGrid strokeDasharray="5 0" vertical={false} tickSize={10} padding={{ left: 20 }}/>
      <XAxis   tickLine={false} axisLine={true} dataKey="day" allowDuplicatedCategory={false} />
      <YAxis  yAxisId="left" tickCount={5}  dx={-15} dataKey="value"/>
      <YAxis  yAxisId="right" orientation="right" tickCount={5} dx={-15} dataKey="value"/>
      <Tooltip/>
      <Legend
      layout="horizontal" verticalAlign="top" align="center" 
      payload={
        bodyWeightAndFatData.map(
          item => ({
            type: "circle",
            id: item.name,
            color: item.style,
            value: `${item.category}`
          })
        )
      }/>
      {bodyWeightAndFatData.map(s => (
        <Line  yAxisId="left" dataKey="value" data={s.data} name={s.name} key={s.category} stroke={s.style}/>
      ))}
            {bodyWeightAndFatData.map(s => (
        <Line  yAxisId="right" dataKey="value" data={s.data} name={s.name} key={s.category} stroke={s.style}/>
      ))}
    </LineChart>
    </ResponsiveContainer>
    </div>
    </div>
  );
}

const bodyweights和fatdata=[
{
姓名：“萨利姆”，
样式：“#57c0e8”，
类别：'体重'，
数据：[
{天：23，值：100}，
{天：24，值：101}，
{天：25，值：104}，
{天：26，值：107}，
{天：27，值：108}，
{天：28，值：105}，
{天：29，值：106}，
{天：30，值：107}，
{天：31，值：107}，
],
},
{
姓名：“萨利姆”，
风格：'粉红'，
类别：'脂肪百分比'，
数据：[
{天：23，值：134}，
{天：24，值：135}，
{天：25，值：131}，
{天：26，值：133}，
{天：27，值：137}，
{天：28，值：131}，
{天：29，值：130}，
{天：30，值：139}，
{天：31，值：138}，
],
},
];
导出默认函数App（）{
返回(
平均测量
({
类型：“圆圈”，
id:item.name，
颜色：item.style，
值：`${item.category}`
})
)
}/>
{bodyWeightAndFatData.map（s=>(
))}
{bodyWeightAndFatData.map（s=>(
))}
);
}

两个轴，一个在左边，一个在右边。

我是这样做的

 const bodyWeightAndFatData = [
  {
    name: 'salim',
    style:'#57c0e8',
    category:'Body Weight',
    data: [
      { day: 23, value: 100 },
      { day: 24, value: 101 },
      { day: 25, value: 104 },
      { day: 26, value: 107 },
      { day: 27, value: 108 },
      { day: 28, value: 105 },
      { day: 29, value: 106 },
      { day: 30, value: 107 },
      { day: 31, value: 107 },
    ],
  },
  {
    name: 'salim',
    style:'pink',
    category:'Fat Percentage',
    data: [
      { day: 23, value: 134 },
      { day: 24, value: 135 },
      { day: 25, value: 131 },
      { day: 26, value: 133 },
      { day: 27, value: 137 },
      { day: 28, value: 131 },
      { day: 29, value: 130 },
      { day: 30, value: 139 },
      { day: 31, value: 138 },
    ],
  },

];



export default function App() {
  return (

    <div >
    <div >
    <p>Average Measurments</p>
      <ResponsiveContainer width="95%" height={300}>
      <LineChart >
      <CartesianGrid strokeDasharray="5 0" vertical={false} tickSize={10} padding={{ left: 20 }}/>
      <XAxis   tickLine={false} axisLine={true} dataKey="day" allowDuplicatedCategory={false} />
      <YAxis  yAxisId="left" tickCount={5}  dx={-15} dataKey="value"/>
      <YAxis  yAxisId="right" orientation="right" tickCount={5} dx={-15} dataKey="value"/>
      <Tooltip/>
      <Legend
      layout="horizontal" verticalAlign="top" align="center" 
      payload={
        bodyWeightAndFatData.map(
          item => ({
            type: "circle",
            id: item.name,
            color: item.style,
            value: `${item.category}`
          })
        )
      }/>
      {bodyWeightAndFatData.map(s => (
        <Line  yAxisId="left" dataKey="value" data={s.data} name={s.name} key={s.category} stroke={s.style}/>
      ))}
            {bodyWeightAndFatData.map(s => (
        <Line  yAxisId="right" dataKey="value" data={s.data} name={s.name} key={s.category} stroke={s.style}/>
      ))}
    </LineChart>
    </ResponsiveContainer>
    </div>
    </div>
  );
}

const bodyweights和fatdata=[
{
姓名：“萨利姆”，
样式：“#57c0e8”，
类别：'体重'，
数据：[
{天：23，值：100}，
{天：24，值：101}，
{天：25，值：104}，
{天：26，值：107}，
{天：27，值：108}，
{天：28，值：105}，
{天：29，值：106}，
{天：30，值：107}，
{天：31，值：107}，
],
},
{
姓名：“萨利姆”，
风格：'粉红'，
类别：'脂肪百分比'，
数据：[
{天：23，值：134}，
{天：24，值：135}，
{天：25，值：131}，
{天：26，值：133}，
{天：27，值：137}，
{天：28，值：131}，
{天：29，值：130}，
{天：30，值：139}，
{天：31，值：138}，
],
},
];
导出默认函数App（）{
返回(
平均测量
({
类型：“圆圈”，
id:item.name，
颜色：item.style，
值：`${item.category}`
})
)
}/>
{bodyWeightAndFatData.map（s=>(
))}
{bodyWeightAndFatData.map（s=>(
))}
);
}

两个轴，一个在左侧，一个在右侧