Показать обе области на диаграмме области, где не хватает некоторых значений - PullRequest
Новая
       55

Показать обе области на диаграмме области, где не хватает некоторых значений

1 голос
/ 08 апреля 2020

У меня есть некоторые данные, которые я хотел бы отобразить на диаграмме области. В данных представлены две области: a и b. a имеет значения для всех значений оси x, а b - нет. Похоже, это означает, что область для b вообще не заполняется.

Возможно ли в этой ситуации заполнить обе области? 

const { Area, XAxis, YAxis, Tooltip, AreaChart } = Recharts;

const data = [
  { a: [1, 2], b: [3, 5], c: 1 },
  { a: [5, 6], c: 2 },
  { a: [2, 3], c: 3 },
  { a: [1, 8], b: [4, 8], c:4 },
];

const App = () => (
  <AreaChart width={730} height={250} data={data}
    margin={{ top: 10, right: 30, left: 0, bottom: 0 }}>
    <XAxis dataKey="c" />
    <YAxis />
    <Tooltip />
    <Area type="monotone" dataKey="a" stroke="#8884d8" />
    <Area type="monotone" dataKey="b" stroke="#82ca9d" />
  </AreaChart>
)

ReactDOM.render(
  (<App />),
  document.getElementById('app')
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.7.2/prop-types.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/recharts/1.8.5/Recharts.js"></script>

<div id="app"></div>

Edit

connnectNulls, кажется, проходит часть пути, но поведение не совсем то, что я ожидал: 

const { Area, XAxis, YAxis, Tooltip, AreaChart } = Recharts;

const data = [
  { a: [1, 2], b: [3, 5], c: 1 },
  { a: [5, 6], c: 2 },
  { a: [2, 3], c: 3 },
  { a: [1, 8], b: [4, 8], c:4 },
];

const App = () => (
  <AreaChart width={730} height={250} data={data}
    margin={{ top: 10, right: 30, left: 0, bottom: 0 }}>
    <XAxis dataKey="c" />
    <YAxis />
    <Tooltip />
    <Area type="monotone" dataKey="a" connectNulls stroke="#8884d8" />
    <Area type="monotone" dataKey="b" connectNulls stroke="#82ca9d" />
  </AreaChart>
)

ReactDOM.render(
  (<App />),
  document.getElementById('app')
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.7.2/prop-types.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/recharts/1.8.5/Recharts.js"></script>

<div id="app"></div>
...