Javascript 记录：如何使用ComposedChart从开始到结束绘制步骤线

我使用recharts的

ComposedChart

绘制条形图和阶梯线图

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

有好办法吗

样本图像

示例代码

从“React”导入React；
从“recharts”导入{ResponsiveContainer，ComposedChart，Line，Bar，Cell，XAxis，YAxis}；
常量采样图=（）=>{
常数数据=[
{
目标：10，
价值：12
},
{
目标：14，
价值：4
},
{
目标：17，
数值：10
},
{
目标：8，
价值：14
}
];
返回(
{data.map（（d，索引）=>(
))}
);
};
导出{SampleGraph}；

我也面临类似的问题。请帮忙！

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