reactjs - Recharts:在 BarChart 内循环两次时不显示
问题描述
我使用 Recharts 来显示我的图表。
我的数据如下所示:
const data = [
{name: 'day 1', supermarket1:{strawberry:4090, apple:3740} , supermarket2:{strawberry:6498, apple:1008}, supermarket3:{strawberry:4090, apple:3740}},
{name: 'day 2', supermarket1:{strawberry:200, apple:768} , supermarket2:{strawberry:700, apple:876}, supermarket3:{strawberry:300, apple:932}}
]
我想在条形图中循环两次以显示我的数据
我在条形图中只尝试了一个循环,它工作得很好,但是当我想循环两次时,显示没有出现我不知道为什么
我的代码如下所示:
const SimpleBarChart = React.createClass({
render () {
return (
<BarChart width={600} height={300} data={data}
margin={{top: 5, right: 30, left: 20, bottom: 5}}>
<CartesianGrid strokeDasharray="3 3"/>
<XAxis dataKey="name"/>
<YAxis/>
{["supermarket1", "supermarket2", "supermarket3"].map((elt, index) =>{
["strawberry", "apple"].map((fruit, index2) =>{
console.log(`${elt}.${fruit}`);
return(
<Bar
key={index + index2}
dataKey={`${elt}.${fruit}`}
fill="#1f77b4"
>
</Bar>
)
})
})}
</BarChart>
);
}
})
解决方案
解决方案是在 BarChart 外部映射两次,并根据需要在第三个数组中组织数据,以便在 BarChart 内部使用它。
const SimpleBarChart = React.createClass({
render () {
let keys= [];
{["supermarket1", "supermarket2", "supermarket3"].map((elt, index) =>{
["strawberry", "apple"].map((fruit, index2) =>{
keys.push(`${elt}.${fruit}`)
})
})}
return (
<BarChart width={600} height={300} data={data}
margin={{top: 5, right: 30, left: 20, bottom: 5}}>
<CartesianGrid strokeDasharray="3 3"/>
<XAxis dataKey="name"/>
<YAxis/>
{keys.map((key, index) =>{
return(
<Bar
key={index}
dataKey={`${key}`}
fill="#1f77b4"
></Bar>
)
})}
</BarChart>
);
}
})
推荐阅读
- java - 接口和实现类中的 JML 规范
- azure - 是否可以在 Azure Blob 存储上复制文件夹?
- bash - 如何使用 bash 数组卷曲发布请求?
- regex - 使用正则表达式从文本文件中提取数据
- plotly - 为仪表板创建列表小部件
- c++ - 自动矢量化的最小循环长度?
- swift - 是否必须获得本地网络访问的网络多播权利才能支持 iOS 14?
- api - Ngrok 访问子域
- javascript - 如何从 FlatList keyExtractor 获取 ID 并在模式中使用它?
- ruby-on-rails - 使用 Record.friendly.find 参数防止 ID