交易视图图表没有占据包装 div 的整个空间

Question

我想实现一个交易视图小部件，但它没有占用包装器 div 的整个空间

我正在嵌入此网站的图表 https://www.tradingview.com/widget/advanced-chart/ 并且我选择了 Autosze

我的网站：https://finfin.sk/uniswap-recenzia/#uni

CSS

.trading-wrapper {
    width: 100%;
    height: 500px;
}

这是代码：

    <!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container">
  <div id="tradingview_98062"></div>
  <div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/symbols/UNIUSD/?exchange=BINANCEUS" rel="noopener" target="_blank"><span class="blue-text">UNIUSD Chart</span></a> by TradingView</div>
  <script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
  <script type="text/javascript">
  new TradingView.widget(
  {
  "autosize": true,
  "symbol": "BINANCEUS:UNIUSD",
  "interval": "D",
  "timezone": "Etc/UTC",
  "theme": "dark",
  "style": "1",
  "locale": "en",
  "toolbar_bg": "#f1f3f6",
  "enable_publishing": false,
  "hide_top_toolbar": true,
  "hide_legend": true,
  "save_image": false,
  "container_id": "tradingview_98062"
}
  );
  </script>
</div>
<!-- TradingView Widget END -->

Answer 1

我也发现了同样的问题，但是搜索后发现代码必须将宽度和高度添加到100%，如下所示：

 new TradingView.widget(
          {
          "autosize": true,
          "width": "100%",
          "height": "100%",
          "symbol": "OANDA:XAUUSD",
          "interval": "D",
          "timezone": "America/Argentina/Buenos_Aires",
          "theme": "dark",
          "style": "1",
          "locale": "es",
          "toolbar_bg": "#f1f3f6",
          "enable_publishing": false,
          "allow_symbol_change": true,
          "container_id": "tradingview_91540"
        }

Answer 2

删除 autosize: true 并添加固定高度: 500 在反应中对我有用：

      new window.TradingView.widget({
        width: "100%",
        height: 500,
        symbol: "NASDAQ:AAPL",
        interval: "D",
        timezone: "Etc/UTC",
        theme: "dark",
        style: "1",
        locale: "en",
        enable_publishing: false,
        allow_symbol_change: true,
        container_id: "tradingview_bc640"
      });