如何解决如何动态显示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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。