Реагировать DataKey в диаграммах

Question

Я потребляющие приборы данных для заполнения диаграммы, построенную с 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 dynanmically в моих XAxis и Lines компонентов для 2-х объектов Финансы и DAU?

Answer 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> 
    ); 
    } 
};