尝试将交易视图小部件添加到我的网站中。当用户从下拉列表中select
选项时,必须加载此小组件。
问题:小部件已加载,但它替换了正文中的所有内容,因此下拉列表消失了。
示例:
网页代码:
<select name="fx" class="fx">
<option value="EURUSD">EURUSD</option>
<option value="EURJPY">EURJPY</option>
</select>
.JS:
function changeFX(fx){
var fxWidget = new TradingView.widget({
"width": 500,
"height": 400,
"symbol": "FX:"+fx,
"interval": "1",
"timezone": "Etc/UTC",
"theme": "White",
"style": "2",
"locale": "en",
"toolbar_bg": "#f1f3f6",
"hide_top_toolbar": true,
"save_image": false,
"hideideas": true
});
return themeWidget;
}
$(document).on('change','.fx',function(){
var widget = changeFX(this.value);
// do something with widget.
});
http://jsfiddle.net/livewirerules/3e9jaLku/5(选择下拉选项,然后查看小部件加载但下拉列表消失)
如何使下拉列表不会消失并且仍然加载交易视图小部件的任何建议?
太晚了,但您可以使用参数"container_id"来选择放置图形的位置。
来源 : https://github.com/mmmy/css3demos/wiki/Widget-Constructor
所以我可以从小部件网站上得到什么。无论发生什么,它都是如何工作的。因此,要按照您想要的方式运行。你将不得不使用一个 iframe。在你的索引中.html并创建一个单独的文件说图表.html并将 iframe 的 SRC 作为图表.html。在更改时,甚至可以使用查询参数更改框架的 src,并在图表中读取该查询参数.html并创建图表。以下是供您参考的代码。
索引.html
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-git1.min.js"></script>
<script>
$(document).on('change','.fx',function(){
//var widget = changeFX(this.value);
document.getElementById('content').src = "chart.html?value="+this.value;
document.getElementById('content').style.display = "block";
});
</script>
<style>
iframe{
height:400px;
width:600px;
display:none;
}
</style>
</head>
<body>
<select name="fx" class="fx">
<option value="EURUSD">EURUSD</option>
<option value="EURJPY">EURJPY</option>
</select>
<iframe src="chart.html" id="content" >
</iframe>
</body>
</html>
图表.html
<html>
<head>
<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
<script>
function getParameterByName(name, url) {
if (!url) {
url = window.location.href;
}
name = name.replace(/[[]]/g, "\$&");
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/+/g, " "));
}
var fx = getParameterByName('value');
var fxWidget = new TradingView.widget({
"width": 500,
"height": 400,
"symbol": "FX:"+fx,
"interval": "1",
"timezone": "Etc/UTC",
"theme": "White",
"style": "2",
"locale": "en",
"toolbar_bg": "#f1f3f6",
"hide_top_toolbar": true,
"save_image": false,
"hideideas": true
});
</script>
</head>
<body>
</body>
</html>
这是我创建的 plunker 演示。
我用于代码获取查询参数的链接。
如何在 JavaScript 中获取查询字符串值?
锄头它有助于:)
这对我来说是:
我的网页代码:
<div class="dropdown no-arrow">
<select id="my_stocks" class="form-control">
<option value=" ">Select Stock</option>
<option value="AAPL">AAPL</option>
<option value="TSLA">TSLA</option>
</select>
</div>
<div class="card-body">
<!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container tech_analysis">
<div id="tradingview_3418f"></div>
<div class="tradingview-widget-copyright">
</div>
<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
<script type="text/javascript">
new TradingView.widget(
{
"width": "100%",
"height" : 610,
"symbol": "NASDAQ:AAPL",
"interval": "D",
"timezone": "Etc/UTC",
"theme": "Light",
"style": "1",
"locale": "en",
"toolbar_bg": "#f1f3f6",
"enable_publishing": false,
"allow_symbol_change": true,
"container_id": "tradingview_3418f"
});
</script>
</div>
<!-- TradingView Widget END -->
</div>
我的查询:
<script>
$(document).on('change','#my_stocks',function(){
var stock_selected = $(this).val();
var fxWidget = new TradingView.widget({
"width": "100%",
"height" : 610,
"symbol": "NASDAQ:"+stock_selected,
"interval": "D",
"timezone": "Etc/UTC",
"theme": "Light",
"style": "1",
"locale": "en",
"toolbar_bg": "#f1f3f6",
"enable_publishing": false,
"allow_symbol_change": true,
"container_id": "tradingview_3418f"
});
});
</script>