Recharts 连接断开的线
Recharts join disconnected lines
当时间序列数据中存在空值时,Recharts 不会将点连接起来并将其视为折线图中的独立点。
我要加入断开的点。我怎样才能做到这一点?
const data = [
{
ts: 1641275508,
uv: 4000,
pv: null,
amt: 2400
},
{
ts: 1641275608,
uv: null,
pv: 1398,
amt: 2210
},
{
ts: 1641275708,
uv: 2000,
pv: 9800,
amt: 2290
},
{
ts: 1641275808,
uv: null,
pv: 3908,
amt: 2000
},
{
ts: 1641275908,
uv: 1890,
pv: null,
amt: 2181
},
{
ts: 1641276008,
uv: 2390,
pv: 3800,
amt: 2500
},
{
ts: 1641276108,
uv: null,
pv: 4300,
amt: 2100
}
];
当前结果
预期结果
https://codesandbox.io/s/simple-line-chart-forked-mozqo?file=/src/App.tsx
可以使用 connectNulls
props 通过 Line, Area 等组件来实现
<LineChart
width={500}
height={300}
data={data}
margin={{
top: 5,
right: 30,
left: 20,
bottom: 5
}}
>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="ts" type={"number"} domain={["dataMin", "dataMax"]} />
<YAxis />
<Tooltip />
<Legend />
<Line type="monotone" connectNulls dataKey="pv" stroke="#8884d8" />
<Line type="monotone" connectNulls dataKey="uv" stroke="#82ca9d" />
</LineChart>
解决方案:
https://codesandbox.io/s/simple-line-chart-forked-mdkeb?file=/src/App.tsx
当时间序列数据中存在空值时,Recharts 不会将点连接起来并将其视为折线图中的独立点。
我要加入断开的点。我怎样才能做到这一点?
const data = [
{
ts: 1641275508,
uv: 4000,
pv: null,
amt: 2400
},
{
ts: 1641275608,
uv: null,
pv: 1398,
amt: 2210
},
{
ts: 1641275708,
uv: 2000,
pv: 9800,
amt: 2290
},
{
ts: 1641275808,
uv: null,
pv: 3908,
amt: 2000
},
{
ts: 1641275908,
uv: 1890,
pv: null,
amt: 2181
},
{
ts: 1641276008,
uv: 2390,
pv: 3800,
amt: 2500
},
{
ts: 1641276108,
uv: null,
pv: 4300,
amt: 2100
}
];
当前结果
预期结果
https://codesandbox.io/s/simple-line-chart-forked-mozqo?file=/src/App.tsx
可以使用 connectNulls
props 通过 Line, Area 等组件来实现
<LineChart
width={500}
height={300}
data={data}
margin={{
top: 5,
right: 30,
left: 20,
bottom: 5
}}
>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="ts" type={"number"} domain={["dataMin", "dataMax"]} />
<YAxis />
<Tooltip />
<Legend />
<Line type="monotone" connectNulls dataKey="pv" stroke="#8884d8" />
<Line type="monotone" connectNulls dataKey="uv" stroke="#82ca9d" />
</LineChart>
解决方案:
https://codesandbox.io/s/simple-line-chart-forked-mdkeb?file=/src/App.tsx