在特定 div 中打开脚本。不是整个窗口

Question

我有一个在页面加载时加载的脚本，并将图表加载到 div 中。脚本直接放在 div 中，就像文档显示的那样。

               <div id="chart2" style='height:100%;'>
                  <script type="text/javascript">
                    var chart2 = new TradingView.widget({
                    "autosize": true,
                    "interval": "60",
                    "timezone": "Etc/UTC",
                    "locale": "en",
                    "toolbar_bg": "rgba(255, 255, 255, 1)",
                   });
                </script>
               </div>

图表直接加载到 div#chart2 中。 TradingView 小部件似乎不允许您以编程方式仅更改图表的符号。

所以要从不同的交易品种加载新数据，看来我必须销毁图表并重新加载它。这样做效果很好

     $('.chooseSymbol').click(function(){
           $('#chart2').html("");
           var symbol = $(this).data('symbol');
           var sc = '<script>var chart2 = new TradingView.widget({"autosize": true,"symbol": "POLONIEX:'+symbol+'","interval": "60","timezone": "Etc/UTC","theme": "White","style": "1","locale": "en","toolbar_bg": "rgba(255, 255, 255, 1)","enable_publishing": false,"hideideas": true});<\/script>';
           $("#chart2").append(sc);
      });

但是，这似乎并没有仅将其附加到#chart2。 它似乎替换了整个页面的整个主体，并制作了图表的完整页面视图。符号变化很好，但我需要它来替换 div 内的当前图表。

PS 我知道我可以允许交易视图下拉菜单，因此用户可以选择他们的交易品种。但我希望用户只选择我在网站上允许的符号。因此我隐藏了符号输入并选择了这个选项。

Answer 1

小部件似乎有一个container_id 选项，用于将图表嵌入到特定的 DIV 中。所以试试：

$('.chooseSymbol').click(function() {
    var symbol = $(this).data('symbol');
    var chart2 = new TradingView.widget({
        container_id: 'chart2',
        symbol: "POLONIEX:"+symbol, 
        "autosize": true,
        "interval": "60",
        "timezone": "Etc/UTC",
        "locale": "en",
        "toolbar_bg": "rgba(255, 255, 255, 1)",
    });
});

如果您不使用此选项，它将使用 document.write() 将小部件放置在当前位置，如果在文档加载后使用它，则会清除页面。

如果您只想更改现有图表中的符号，我认为有一个setSymbol 方法。

$('.chooseSymbol').click(function() {
    var symbol = $(this).data('symbol');
    chart2.setSymbol("POLONIX:" + symbol);
});