javascript - Recharts：如何使用 ComposedChart 从头到尾绘制阶梯线

Question

我使用图表绘制条形图和阶梯线图ComposedChart。

看起来不错，但我想从头到尾画阶梯线。

有什么好办法吗？

示例图像

示例代码

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 };

标签： javascriptrecharts