重新图表连接断开的线路答案

【问题标题】：Recharts join disconnected lines重新图表连接断开的线路
【发布时间】：2022-01-04 05:58:24
【问题描述】：

当时间序列数据中存在空值时，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

【问题讨论】：

标签： javascript reactjs recharts

【解决方案1】：

可以通过 Line、Area 等组件使用connectNulls props 来实现。

    <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

【讨论】：