React-financial-charts 在 div 外显示 svg答案

【问题标题】：React-financial-charts displays svg outside divReact-financial-charts 在 div 外显示 svg
【发布时间】：2021-11-18 17:42:38
【问题描述】：

我对 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 图表似乎在外面。

【问题讨论】：

标签： reactjs svg canvas

【解决方案1】：

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

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

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

【讨论】：