Recharts: Как нарисовать шаговую линию от начала до конца, используя ComposedChart - PullRequest
Новая
       45

Recharts: Как нарисовать шаговую линию от начала до конца, используя ComposedChart

0 голосов
/ 29 апреля 2020

Я рисую гистограммы и линейные графики с использованием ComposedChart перезарядок.

Это выглядит хорошо, но я хочу нарисовать шаговую линию только от начала до конца.

Есть ли хорошо способ?

Пример изображения

enter image description here

Пример кода 

import React from 'react';
import { ResponsiveContainer, ComposedChart, Line, Bar, Cell, XAxis, YAxis } from 'recharts';

const SampleGraph = () => {
const data = [
 {
   target: 10,
   value: 12
 },
 {
   target: 14,
   value: 4
 },
 {
   target: 17,
   value: 10
 },
 {
   target: 8,
   value: 14
 }
];

return (
 <ResponsiveContainer width={'100%'} minHeight={'100px'}>
   <ComposedChart data={data}>
     <Bar dataKey={'value'} isAnimationActive={false}>
       {data.map((d, index) => (
         <Cell key={`value-${index}`} fill={d.value < d.target ? '#F75966' : '#23AA55'} />
       ))}
     </Bar>
     <Line
       type='step'
       dataKey='target'
       stroke='rgba(0, 0, 0, 0.5)'
       strokeDasharray='5 5'
       strokeWidth={4}
       isAnimationActive={false}
       dot={false}
     />
     <XAxis />
     <YAxis />
   </ComposedChart>
 </ResponsiveContainer>
);
};

export { SampleGraph };
...