使用recharts创建范围条形图

Question

如何在使用recharts创建的条形图中定义条形图范围。有什么方法可以让我们做到这一点吗？

例如，我有两个值startPos，endPos。这样我就想创建一个从点(StartPos)开始，到(EndPos)结束的条形图

Answer 1

这有点困难，但仍有可能，recharts为您提供了创建自定义形状(属性shape)的能力，但您必须自己实现它。

这是我为这个例子编写的代码，数据键是卷(它可以接受一个具有两个值startPos，endPos的数组)

const moveTo = (x, y, { ry = 0, rx = 0 }) => `M${x + rx}, ${y + ry}`;
const lineTo = (x, y, { ry = 0, rx = 0 }) => `L${x + rx}, ${y + ry}`;
const quadraticCurveTo = (x, y, { ry = 0, rx = 0 }) => `Q${x}, ${y} ${x + rx} ${y + ry}`;

const drawRoundEdgesRectangle = (points, radius,
  { radiusTop = true, radiusBottom = false }) => `${moveTo(points[0].x, points[0].y, { rx: radiusTop ? radius : 0 })}
  ${quadraticCurveTo(points[0].x, points[0].y, { ry: radiusTop ? radius : 0 })}
  ${lineTo(points[1].x, points[1].y, { ry: radiusBottom ? -radius : 0 })}
  ${quadraticCurveTo(points[1].x, points[1].y, { rx: radiusBottom ? radius : 0 })}
  ${lineTo(points[2].x, points[2].y, { rx: radiusBottom ? -radius : 0 })}
  ${quadraticCurveTo(points[2].x, points[2].y, { ry: radiusBottom ? -radius : 0 })}
  ${lineTo(points[3].x, points[3].y, { ry: radiusTop ? radius : 0 })}
  ${quadraticCurveTo(points[3].x, points[3].y, { rx: radiusTop ? -radius : 0 })}
  Z`;
const RoundBar = (props) => {
      const {
        fill, x, y, width, height, rem, volume,
      } = props;
      const color = rem ? 'url(#linearGradient-rem)' : fill;
      const radius = 3;
      const haveRadiusBottom = isArray(volume) && volume[1] - volume[0] !== 0 && volume[0] !== 0;
      const haveRadiusTop = (isArray(volume) && volume[1] - volume[0] !== 0)
        || (!isArray(volume) && volume !== 0);
      const points = [
        { x, y }, { x, y: y + height }, { x: x + width, y: y + height }, { x: x + width, y },
      ];
      const d = drawRoundEdgesRectangle(points, radius,
        { radiusBottom: haveRadiusBottom, radiusTop: haveRadiusTop });
      return <path d={d} stroke="none" fill={color} />;
    };

这是我的组件栏，它在Barchart中：

<Bar
                  barSize={54}
                  animationBegin={400}
                  animationDuration={400} 
                  dataKey={!sales ? 'sales' : 'volume'}
                  fill={sales ? 'url(#linearGradient-1)' : 'url(#linearGradient-2)'}
                  shape={<RoundBar />}
                >