如何使用recharts实现条形图的内部曲线

问题描述

预期产出

我想使用 recharts 库实现类似的图表 有什么可以实现类似图表的东西吗？

这是我的片段

          <BarChart
              data={[
                {
                  "value1": 200,"value2": 300,type: '1',},...
              ]}
            layout="vertical" >
                     <Cartesiangrid
              vertical={true}
              horizontal={false}
              stroke="#D2E7FB"
              fillOpacity={0}
            />
              <XAxis type="number" />
              <YAxis width={80} type="category" dataKey="type" offset={10} />
              
              <Tooltip />

              <Bar
                radius={[0,0]}
                dataKey="value1"
                fill="#54C6F0"
                stackId="a"
              />
              <Bar
               stackId="a"
                radius={[10,10,10]}
              
                dataKey="value2"
                fill="#F7B315"
              />
            </BarChart>

当前输出

我遗漏的任何东西你能帮我吗？

解决方法

React 中的示例，无需重新图表：

const data = [
  {
    value1: 200,value2: 300,},{
    value1: 120,value2: 250,{
    value1: 100,value2: 200,];

const SPACING = 3;
const firstPath = value1 => `M 0,-10 H ${value1} A 10,10 1 1 1 ${value1},10 H 0 Z`; 
const secondPath = (value1,value2) => `M ${value1 + SPACING},-10 H ${value2} A 10,10 1 1 1 ${value2},10 H ${value1 + SPACING} A 10,10 0 0 0 ${value1 + SPACING},-10 Z`; 



const GraphItem = ({data,index}) => {
    const {value1,value2} = data;
    return (
    <g transform={`translate(10,${index * 50 + 20})`}>
      <path d={firstPath(value1)} fill="#F7B315" />
      <path d={secondPath(value1,value2)} fill="#54C6F0" />
    </g>
  );
}

const Graph = ({data}) => {
    return (
    <svg width="400" height="170">
    {data.map((item,index) => 
        <GraphItem data={item} index={index} key={index} />)
    }
    </svg>
  );
}

ReactDOM.render(
  <Graph data={data} />,document.getElementById('container')
);

<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>
<div id="container">
</div>