如何动态显示 React Recharts？

Question

我正在使用 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吗？

Answer 1

事实上，您可以使用 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>

如何动态显示 React Recharts？

How to display React Recharts dynamically?

reactjs

recharts