React-financial-charts 在 div 外显示 svg

Question

我对 React 比较陌生，我正在尝试创建一种用于加密货币价格的仪表板。

我正在使用 react-financial-charts 在 ResponsiveReactGridLayout 内生成 OHLCV 图表。

但是，svg 总是显示在网格之外。谁能帮我解决这个问题：

这是代码：https://github.com/astronights/market_analysis_tool_evaluation-ui/blob/master/src/components/Home/Home.tsx 我在其中呈现包含 ChartCanvas 的组件。

<div key="candlestick" className="home-card">
        <div ref={canvasRef} style={{ width: "100%", height: "100%" }}>
          {canvasRef.current ? (
            <Candlestick
              coin={coin}
              width={canvasRef.current.clientWidth}
              height={canvasRef.current.offsetHeight}
            />
          ) : null}
        </div>
      </div>

这里是 chartCanvas 的代码：https://github.com/astronights/market_analysis_tool_evaluation-ui/blob/master/src/components/Home/Candlestick.tsx

return (
    <ChartCanvas
      height={props.height}
      ratio={1}
      width={props.width}
      margin={{ bottom: 50, top: 100, left: 50, right: 50 }}
      padding={0}
      seriesName={`OHLCV prices - ${props.coin.coin}`}
      data={prices}
      xScale={scaleTime()}
      xAccessor={xAccessor}
      xExtents={xExtents}
     />

如图所示，生成的 SVG 图表似乎在外面。

Answer 1

通过添加 CSS 的这些行修复。

.react-financial-charts {
  position: absolute !important;
  top: 0;
  left: 0;
}

canvas {
  position: absolute !important;
  top: 0;
  left: 0;
}

React-financial-charts 在 div 外显示 svg

React-financial-charts displays svg outside div

svg

canvas

reactjs