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

Question

预期产出

我想使用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, 0, 0]}
                dataKey="value1"
                fill="#54C6F0"
                stackId="a"
              />
              <Bar
               stackId="a"
                radius={[10, 10, 10, 10]}
              
                dataKey="value2"
                fill="#F7B315"
              />
            </BarChart>

电流输出

我缺少什么你能帮帮我吗？

标签： reactjsgraphrecharts

Answer 1

没有图表的 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>