Я хочу создать компонент ReChart, который имеет несколько строк.
ТАК, что у меня есть этот фиктивный код.
<LineChart
data={data}
margin={{
top: 16,
right: 16,
bottom: 0,
left: 24
}}
>
<XAxis dataKey="time" />
<YAxis>
<Label angle={270} position="left" style={{ textAnchor: "middle" }}>
Cyber assesment
</Label>
</YAxis>
<Line type="monotone" dataKey="amount" stroke="#556CD6" dot={false} />
</LineChart>
с данными, являющимися массивом, с объектом с двумя значениями:
function createData(time, amount) {
return { time, amount };
}
const data = [
createData('00:00', 0),
createData('03:00', 300),
createData('06:00', 600),
createData('09:00', 800),
createData('12:00', 1500),
createData('15:00', 2000),
createData('18:00', 2400),
createData('21:00', 2400),
createData('24:00', undefined),
];
я хочу сделать так, чтобы я мог построить несколько линий, где я пытался создать другуюФункция и добавление других данных, в тот же массив, но без хорошего результата.
Как этого достичь?
Я пытался создать рабочий пример, но безуспешно
function createData(amountA, amountB) {
return {a: amountA, b: amountB };
}
const data = [
createData(100, 200),
createData(200, 400),
createData(400, 500),
createData(600, 800),
createData(650, 700),
createData(900, 800)
];
export default function Chart() {
console.log(data)
return (
<React.Fragment>
<Title>Performance indication</Title>
<ResponsiveContainer>
<LineChart
data={data}
margin={{
top: 16,
right: 16,
bottom: 0,
left: 24,
}}
>
<XAxis dataKey="time" />
<YAxis>
<Label angle={270} position="left" style={{ textAnchor: 'middle' }}>
Cyber assesment
</Label>
</YAxis>
<Line type="monotone" dataKey={data.a} stroke="#556CD6" dot={false} />
<Line type="monotone" dataKey={data.b} stroke="#556CD6" dot={false} />
</LineChart>
</ResponsiveContainer>
</React.Fragment>