[英]How to make embedded chart responsive
I have embedded a stock chart from Tradingview into my site, but I cannot make it responsive (especially the width).我已将 Tradingview 中的股票图表嵌入到我的网站中,但我无法使其响应(尤其是宽度)。 When the page shrinks the chart begin to move outside the screen.当页面缩小时,图表开始移出屏幕。 Here is the code:这是代码:
<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>
I tried changing the units in width to rem
and %
(because I suppose they use px
) but it didn't work.我尝试将宽度单位更改为rem
和%
(因为我想他们使用px
)但它没有用。 I also tried erasing height and width completly and adding "autosize": true
instead.我还尝试完全擦除高度和宽度并添加"autosize": true
。 Then I thought that maybe I'm not editing it correctly, so I started learning about JavaScript objects in W3Schools.然后我想可能是我没有正确编辑它,所以我开始在 W3Schools 中学习 JavaScript 对象。 Couldn't find the information there either.在那里也找不到信息。
The best solution that I could come with is to set the overflow
to hidden
, but you can understand it's not right.我能想到的最佳解决方案是将overflow
设置为hidden
,但您可以理解这是不对的。 What I need is something like "shrink to fit" property or simply edit the javascript somehow.我需要的是诸如“缩小以适应”属性或以某种方式简单地编辑 javascript 之类的东西。
Other links I read (which also didn't help):我阅读的其他链接(也没有帮助):
Here is my entire code- what I wanted to achieve is to open the chart from the navbar (I am using 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%">
... Repeats ... ……重复……
The way I solved it was to go to Chrome Dev tools and play with the chart's design over there.我解决它的方法是使用 Chrome Dev 工具并在那里使用图表的设计。 I found what classes I should edit that effect the chart size, and used @media rule to change those classes for certain devices.我找到了应该编辑哪些类会影响图表大小,并使用 @media 规则为某些设备更改这些类。
Use Dev tools next time @me ;)下次使用开发工具@me ;)
Here is my solution how to make it in CSS.这是我如何在 CSS 中制作它的解决方案。
Using the ID of this container - <div id="tradingview_8e656"></div>
使用此容器的 ID - <div id="tradingview_8e656"></div>
Then just add in your .css file this lines of code Main parameter is !important
然后只需在您的 .css 文件中添加这行代码 Main 参数是!important
#tradingview_8e656 {
width: 1000px !important;
height: 750px !important;
}
This works for me perfectly.这对我来说非常有效。 Also it remains responsive on a devices.它还在设备上保持响应。 Hope this helps.希望这可以帮助。
Using vue js:使用 vue js:
HTML Body: HTML 正文:
<div class="chart" id="chart" ref="chart"></div>
Vue Methods: 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 );
});
},
And then add this:然后添加这个:
methods: {
resize(width, height)
{
this.chart.resize(width, height);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.