我正在使用数据夹具来填充使用Recharts
构建的图表我的数据中有两个对象:财务和 DAU
const charts = [
{
name: 'Finances',
data:[
{name: 'April', Balance: 48530, saving: 0},
{name: 'May', Balance: 50328, saving: 1798},
{name: 'June', Balance: 48573, saving: -1755},
{name: 'July', Balance: 48825, saving: 252}
]
},
{
name: 'DAU',
data: [
{Day: '2016-10-28', Android: 27, iOS: 12},
{Day: '2016-10-29', Android: 20, iOS: 17},
{Day: '2016-10-30', Android: 17, iOS: 13},
{Day: '2016-10-31', Android: 15, iOS: 13},
{Day: '2016-11-01', Android: 14, iOS: 11}
]
}
];
export default charts;
目前我只为第一个数据对象(财务)传递datakey
代表<XAxis dataKey="name"/>
以及两行代码<Line type="monotone" dataKey="Balance"/>
和<Line type="monotone" dataKey="saving"/>
这是我的图表组件
export default class Chart extends React.Component {
render () {
const { chart, i } = this.props;
return (
<div>
<h1>{chart.name}</h1>
<LineChart width={600} height={300} data={chart.data}
margin={{top: 5, right: 30, left: 20, bottom: 5}}>
<XAxis dataKey="name"/>
<YAxis/>
<CartesianGrid strokeDasharray="3 3"/>
<Tooltip/>
<Legend />
<Line type="monotone" dataKey="Balance" stroke="#82ca9d" />
<Line type="monotone" dataKey="saving" stroke="#8884d8" activeDot={{r: 8}}/>
</LineChart>
</div>
);
}
};
如何在我的dataKey
和XAxis
组件中为{strong>财务和 DAU 两个对象传递Lines
dynanmically?
答案 0 :(得分:1)
我会将关键字添加到图表对象中,并将它们用作Chart
组件中的道具。像这样:
const charts = [
{
name: 'Finances',
xAxisKey: 'name',
line1Key: 'Balance',
line2Key: 'saving',
data:[
{name: 'April', Balance: 48530, saving: 0},
{name: 'May', Balance: 50328, saving: 1798},
{name: 'June', Balance: 48573, saving: -1755},
{name: 'July', Balance: 48825, saving: 252}
]
},
{
name: 'DAU',
xAxisKey: 'Day',
line1Key: 'Android',
line2Key: 'iOS',
data: [
{Day: '2016-10-28', Android: 27, iOS: 12},
{Day: '2016-10-29', Android: 20, iOS: 17},
{Day: '2016-10-30', Android: 17, iOS: 13},
{Day: '2016-10-31', Android: 15, iOS: 13},
{Day: '2016-11-01', Android: 14, iOS: 11}
]
}
];
组件:
export default class Chart extends React.Component {
render () {
const { chart, i } = this.props;
return (
<div>
<h1>{chart.name}</h1>
<LineChart width={600} height={300} data={chart.data}
margin={{top: 5, right: 30, left: 20, bottom: 5}}>
<XAxis dataKey={chart.xAxisKey} />
<YAxis/>
<CartesianGrid strokeDasharray="3 3"/>
<Tooltip/>
<Legend />
<Line type="monotone" dataKey={chart.line1Key} stroke="#82ca9d" />
<Line type="monotone" dataKey={chart.line2Key} stroke="#8884d8" activeDot={{r: 8}}/>
</LineChart>
</div>
);
}
};