如何动态显示React Recharts？

问题描述

我正在使用React Recharts，我想动态显示它。 https://recharts.org/en-US/examples/CustomActiveShapePieChart

<ResponsiveContainer width='99%' aspect={3.0 / 2.0}>
  <LineChart width={500} height={300} data={this.state.android}>
    {/* margin={{ top: 5,right: 0,left: -40,bottom: 5 }}> */}
    <XAxis dataKey="Date"/>
    <YAxis/>
    <Tooltip />
    <Legend />
    <Cartesiangrid stroke="#eee" strokeDasharray="5 5"/>
    {/* "#AD7BEC"
    "#F88E4E" */}
    <Line name="android" type="monotone" dataKey="android" stroke="#ff883c" strokeWidth={2} />
    <Line name="ios" type="monotone" dataKey="ios" stroke="#ffb847" strokeWidth={2} />
  </LineChart>
</ResponsiveContainer>

这是我绘制图表折线图的代码，但是我正在用硬代码方式进行操作...现在，我有一个动态生成的数据键数组，现在我想将该键传递到那里

<Line name="android" type="monotone" dataKey="android" stroke="#ff883c" strokeWidth={2} /> 

我想像这样将数组元素传递给datakey变量

dynamic_array=["android","ios","value"]
<Line name="android" type="monotone" dataKey=dynamic_array[0] stroke="#ff883c" strokeWidth={2} /> 

我可以申请map或forEach吗？

解决方法

实际上，您可以使用map方法创建所需的任意Line，就像这样：

renderLines () {
  dynamic_array = ["android","ios","value"];
  const lines = dynamic_array.map((value) => (
    <Line
      key={value}
      name={value}
      type="monotone"
      dataKey={value}
      stroke"#ff883c"
      strokeWidth={2}
    />
  ));
  return lines;
}

然后使用LineChart组件中的方法结果，如下所示：

<LineChart width={500} height={300} data={this.state.android}>
  <XAxis dataKey="Date"/>
  <YAxis/>
  <Tooltip />
  <Legend />
  <CartesianGrid stroke="#eee" strokeDasharray="5 5"/>
  {this.renderLines()}
</LineChart>