如何使嵌入式图表响应

C·阿诺德

我已经将Tradingview的股票图表嵌入到我的网站中，但是我无法使其响应（特别是宽度）。当页面缩小时，图表开始移出屏幕。这是代码：

<div class="tradingview-widget-container">
  <div id="tradingview_8e656"></div>
  <div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/symbols/SP-SPX/" rel="noopener" target="_blank"><span class="blue-text">SPX 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({
    "height": 610,
    "symbol": "SP:SPX",
    "interval": "D",
    "timezone": "Etc/UTC",
    "theme": "Light",
    "style": "1",
    "locale": "en",
    "toolbar_bg": "#f1f3f6",
    "enable_publishing": false,
    "hide_side_toolbar": false,
    "allow_symbol_change": true,
    "container_id": "tradingview_8e656"
  });
  </script>
</div>

我尝试将宽度单位更改为rem和%（因为我想它们使用px），但是没有用。我还尝试完全擦除高度和宽度并添加"autosize": true。然后我以为也许我没有正确地编辑它，所以我开始学习W3Schools中的JavaScript对象。在那也找不到信息。

我可以提供的最佳解决方案是将设置overflow为hidden，但是您可以理解这是不正确的。我需要的是类似“缩小以适合”的属性，或者只是以某种方式编辑javascript。

我阅读的其他链接（也没有帮助）：

这是我的整个代码-我想要实现的是从导航栏打开图表（我正在使用引导程序）：

<div class="container-fluid sticky-top">
  <nav class="navbar navbar-expand-lg" style="background-color:#1B2034">
    <img src="media/a1.jpg" style="height:4rem;width:8rem">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon mb-2"><i class="fa fa-bars fa-2x" style="color:#0040ff"></i></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a class="nav-link" href="#">home page<span class="sr-only">את/ה כאן</span></a>
        </li>
        <li class="nav-item">
          **<a class="nav-link" data-toggle="collapse" href="#graphs">chart page</a>**
        </li>
        <!-- other nav items -->
        <li class="nav-item mt-2">
          <input class="form-control" type="search" placeholder="חיפוש" aria-label="Search">
                      </li>
        <li class="nav-item mt-2">
          <button class="btn btn-outline-info mr-2" type="submit">חיפוש</button>
        </li>
      </ul>
    </div>
  </nav>
  <!-- Other pages -->
  <div class="container-fluid">
    <div class="collapse sticky-top" style="top:5rem;overflow:hidden" id="graphs">
      <div class="card card-body height:100%">
        <!-- TradingView Widget BEGIN -->
        THE CHART CODE
        <!-- TradingView Widget END -->
      </div>
    </div>

<div class="collapse sticky-top" style="top:5rem;overflow:hidden" id="graphs">
          <div class="card card-body height:100%">

...重复...

C·阿诺德

我解决问题的方法是使用Chrome Dev工具并在那里使用图表的设计。我发现应该编辑哪些类来影响图表大小，并使用@media规则更改某些设备的那些类。

下次使用@me开发工具；）

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。