React-financial-charts 在 div 外显示 svg

Posted 2023-03-28

【中文标题】React-financial-charts 在 div 外显示 svg

【英文标题】：React-financial-charts displays svg outside div

【发布时间】：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 图表似乎在外面。

【参考方案1】：

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

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


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