javascript - widget TradingView menggantikan keseluruhan badan HTML

Mencuba untuk menambah widget TradingView ke dalam laman web saya. Widget ini mesti dimuat apabila pengguna memilih satu pilihan daripada dropdown.

Isu: Widget dimuatkan, tetapi ia menggantikan segala-galanya dalam badan dan dengan itu dropdown hilang.

Contoh:

Kod HTML:

<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 (pilih pilihan dropdown, dan lihat widget dimuat tetapi dropdown hilang)

Ada apa-apa nasihat bagaimana untuk menjadikan dropdown tidak hilang dan masih memuatkan widget TradingView?

Jawapan #1

Sudah tentu terlalu lewat, tetapi anda boleh menggunakan hujah "container_id" untuk memilih di mana meletakkan graf itu.

sumber : https://github.com/mmmy/css3demos/wiki/Widget-Constructor

Jawapan #2

Jadi apa yang saya boleh faham dari laman web widget itu. Apa sahaja yang berlaku adalah cara ia berfungsi. Jadi untuk ini berkelakuan seperti yang anda mahu. Anda perlu menggunakan iframe dalam index.html anda dan buat fail berasingan contohnya chart.html dan berikan src iframe itu sebagai chart.html. Dan pada perubahan, ubah juga src bingkai dengan parameter pertanyaan dan baca parameter pertanyaan itu dalam chart.html anda dan buat carta tersebut. Di bawah ialah kod untuk rujukan anda.

index.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>

carta.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>

Berikut ialah satu plunker Demo yang telah saya cipta.

Pautan yang saya gunakan untuk kod bagi mendapatkan parameter pertanyaan.

Bagaimana saya boleh mendapatkan nilai rentetan pertanyaan dalam JavaScript?

Hoe ia membantu :)