logo标签列表

如何使嵌入式图表具有响应性

javascriptjqueryhtmlcss
3

我已经将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。
其他我阅读过的链接（它们也没有帮助）：
- 使嵌入式表格响应 - 为什么Flex项目不能缩小到内容大小以下？ 这是我的整个代码 - 我想实现的是从导航栏打开图表（我正在使用bootstrap）：
<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%">

... 重复 ...

1
小部件本身绝对是响应式的；当使用 autosize:true 时，我将其放置在一个宽度为 240px 的容器中，它按预期进行了调整。当使用 autosize 选项时，图表本身的大小取决于其所在容器的大小；您所描述的可能是其他 CSS 应用的原因。您需要分享产生所描述行为的代码。 - Stevangelista
好的，我会这样做。我的目标是从导航栏打开图表。@Stevangelista - C. Arnold
3个回答
1
我解决此问题的方法是使用Chrome开发工具，并调整图表设计。我找到了影响图表大小的类别，然后使用@media规则来更改这些类别以适应特定设备。
下次可以使用开发工具哦。
0

使用Vue.js：

HTML主体：

<div class="chart" id="chart" ref="chart"></div>

Vue 方法：

 mounted() {
                this.chart = LightweightCharts.createChart(this.$refs.chart, {
                    width: this.$refs.chart.offsetWidth,
                    height: this.$refs.chart.offsetHeight
                });

                // var lineSeries = this.chart.addLineSeries();
                // lineSeries.setData(arr);

                // resize observer (native JS)
                const ro = new ResizeObserver((entries) => {
                    const cr = entries[0].contentRect;
                    this.resize(cr.width, cr.height);
                });

                ro.observe(this.$refs.chart);

                window.addEventListener("resize", () => {
                    this.resize(this.$refs.chart.offsetWidth, this.$refs.chart.offsetHeight );
                });
            },

然后添加这个：

methods: {
resize(width, height)
      { 
         this.chart.resize(width, height);
      }
}
普通的 JavaScript 方法怎么样？ - i need help
使用普通的JS方法会使事情变得更加复杂。这就是为什么我使用Vue，而我的项目是在Laravel中，所以Vue对我来说是最好的选择。 - Maizied Hasan Majumder
-1
这是我的解决方案，如何使用CSS实现。
使用这个容器的ID - <div id="tradingview_8e656"></div> 然后只需在您的.css文件中添加以下代码行 主要参数是!important。
    #tradingview_8e656 {
width: 1000px !important;        
height: 750px !important;
    }

这对我来说完美无缺。而且在设备上仍然保持响应。 希望这可以帮到你。

你需要在CSS属性中使用百分比。 - mteam88
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接