多行 ReCharts
ReCharts with multiple lines
我想创建一个包含多行的 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>
只需在 LineChart
中声明两个 Line
和两个 YAxis
components
并显式声明 yAxisId
。这是我们的一个例子
<LineChart data={data} margin={{ left: -10, right: 10 }}>
<XAxis height={40} dataKey="part" tick={{ fontSize: 10 }}>
<Label
value='Período'
position='insideBottom'
fontSize={14}
fill='#676767'
/>
</XAxis>
<YAxis width={80} yAxisId="left" tick={{ fontSize: 10 }}>
<Label
value={selected.A}
angle={-90}
position='outside'
fill='#676767'
fontSize={14}
/>
</YAxis>
<YAxis width={80} yAxisId="right" orientation="right" tick={{ fontSize: 10, }}>
<Label
value={selected.B}
angle={-90}
position='outside'
fill='#676767'
fontSize={14}
/>
</YAxis>
<Tooltip formatter={(value) => floatParser(value)} />
<Line yAxisId="left" type="monotone" dataKey={selected.A} stroke={colors[1]} />
<Line yAxisId="right" type="monotone" dataKey={selected.B} stroke={colors[0]} />
</LineChart>
data
数组:
const data = [
{ part: 'foo', axisA: 21211, axisB: 1232 }
]
使用最新版本,您可以直接在组件中添加数据。
像这样Recharts multiple Lines with different datasets
const data = [
{name: 'Page A', uv: 4000, amt: 2400},
{name: 'Page B', uv: 3000, amt: 2210},
{name: 'Page C', uv: 2000, amt: 2290},
{name: 'Page D', uv: 2780, amt: 2000},
{name: 'Page E', uv: 1890, amt: 2181},
];
const data2 = [
{name: 'Page A', pv: 2400, amt: 2400},
{name: 'Page B', pv: 1398, amt: 2210},
{name: 'Page C', pv: 9800, amt: 2290},
{name: 'Page D', pv: 3908, amt: 2000},
];
<Line data={data} type="monotone" dataKey="uv" stroke="#8884d8"/>
<Line data = {data2} type="monotone" dataKey="pv" stroke="#82ca9d"/>
我想创建一个包含多行的 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>
只需在 LineChart
中声明两个 Line
和两个 YAxis
components
并显式声明 yAxisId
。这是我们的一个例子
<LineChart data={data} margin={{ left: -10, right: 10 }}>
<XAxis height={40} dataKey="part" tick={{ fontSize: 10 }}>
<Label
value='Período'
position='insideBottom'
fontSize={14}
fill='#676767'
/>
</XAxis>
<YAxis width={80} yAxisId="left" tick={{ fontSize: 10 }}>
<Label
value={selected.A}
angle={-90}
position='outside'
fill='#676767'
fontSize={14}
/>
</YAxis>
<YAxis width={80} yAxisId="right" orientation="right" tick={{ fontSize: 10, }}>
<Label
value={selected.B}
angle={-90}
position='outside'
fill='#676767'
fontSize={14}
/>
</YAxis>
<Tooltip formatter={(value) => floatParser(value)} />
<Line yAxisId="left" type="monotone" dataKey={selected.A} stroke={colors[1]} />
<Line yAxisId="right" type="monotone" dataKey={selected.B} stroke={colors[0]} />
</LineChart>
data
数组:
const data = [
{ part: 'foo', axisA: 21211, axisB: 1232 }
]
使用最新版本,您可以直接在组件中添加数据。
像这样Recharts multiple Lines with different datasets
const data = [
{name: 'Page A', uv: 4000, amt: 2400},
{name: 'Page B', uv: 3000, amt: 2210},
{name: 'Page C', uv: 2000, amt: 2290},
{name: 'Page D', uv: 2780, amt: 2000},
{name: 'Page E', uv: 1890, amt: 2181},
];
const data2 = [
{name: 'Page A', pv: 2400, amt: 2400},
{name: 'Page B', pv: 1398, amt: 2210},
{name: 'Page C', pv: 9800, amt: 2290},
{name: 'Page D', pv: 3908, amt: 2000},
];
<Line data={data} type="monotone" dataKey="uv" stroke="#8884d8"/>
<Line data = {data2} type="monotone" dataKey="pv" stroke="#82ca9d"/>