Переписывание только части Javascript HTML-страницы

avatar
Joel Jishu
8 августа 2021 в 18:23
34
0
0

Я использую виджет TradingView, чтобы показать график рядом со списком на моей html-странице. Я хочу, чтобы просто график переключался на другой в зависимости от того, какой элемент списка щелкнут. Но при вызове функции вся веб-страница переписывается, чтобы показать только график. Есть идеи, как переписать только раздел графика или изменить свойство символа виджета TradingView, чтобы остальная часть страницы осталась нетронутой?

Вот моя страница html и функция -

<div style="display: flex; height: 100%;">
        <div style="width: fit-content; align-items: left;">
           <nav class="navbar">
        <ul class="nav-link" id="stock_list">
            <li id="NASDAQ:AAPL" onclick="plot_graph('NASDAQ:AAPL')">
                Apple
            </li>
            <li id="CAPITALCOM:GOOG" onclick="plot_graph('CAPITALCOM:GOOG')">
              Google
          </li>
          <li>
              Comp
          </li>
        </ul>
      </nav>
        </div>
        <div id="stock_graph" style="flex-grow: 1;" align="center; display: inline;">
            <!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container">
    <script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
    <script type="text/javascript">

<!-- Default Graph -->
    new TradingView.widget(
        {  
        "autosize": true,
        "symbol": "NASDAQ:AAPL",
        "interval": "1",
        "timezone": "Etc/UTC",
        "theme": "dark",
        "style": "1",
        "locale": "en",
        "toolbar_bg": "#f1f3f6",
        "enable_publishing": false,
        "withdateranges": true,
        "hide_side_toolbar": false,
        "allow_symbol_change": true,
        "details": true,
        "hotlist": true,
        "container_id": "tradingview-widget-container"
        }
    );
    </script>
  </div>
  <!-- TradingView Widget END -->
            <script  id="plotter">
                    const navMenu = document.querySelector(".nav-menu");
                    navMenu.classList.toggle("active");

                function plot_graph(n = "NASDAQ:AAPL") {
                    k = "NASDAQ:AAPL";
    new TradingView.widget(
        {  
        "autosize": true,
        "symbol": n,
        "interval": "1",
        "timezone": "Etc/UTC",
        "theme": "dark",
        "style": "1",
        "locale": "en",
        "toolbar_bg": "#f1f3f6",
        "enable_publishing": false,
        "withdateranges": true,
        "hide_side_toolbar": false,
        "allow_symbol_change": true,
        "details": true,
        "hotlist": true,
        "container_id": "tradingview-widget-container"
        });
            }
Источник

Ответы (0)