React-financial-charts在div外部显示svg

Question

我是一个相对较新的反应，我正试图创建一种仪表盘的加密货币价格。

我正在使用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;
}