使用 recharts 创建范围条形图答案

【问题标题】：Creating ranged bar chart using recharts使用 recharts 创建范围条形图
【发布时间】：2020-10-10 16:54:43
【问题描述】：

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

例如我有两个值 startPos，endPos。这样我想创建一个应该从点（startPos）开始并应该在（endPos）结束的酒吧

【问题讨论】：

也许你可以添加一些代码让我们理解你的例子？

标签： javascript reactjs recharts

【解决方案1】：

这有点困难，但仍有可能，recharts 使您能够创建自定义形状（属性 shape），但您必须自己实现。

这是我为此示例编写的代码，数据键是 volume（它可以采用具有两个值 [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 />}
                >

【讨论】：