Контент управления, расположенный во внешнем html-файле, вставляемый через тег объекта на основной сайт (index.html) - PullRequest
Новая
       17

Контент управления, расположенный во внешнем html-файле, вставляемый через тег объекта на основной сайт (index.html)

0 голосов
/ 20 июня 2019

Я работаю над проектом.Это панель инструментов, основанная на d3.js.

. Возникает следующая проблема:

Существует основной сайт (index.html), содержащий меню навигации.Я использую различные инструментальные панели, которые вставляются в index.html через «тег объекта».

Я выгляжу так: 

<div id="sales1">   

    <div id="right">

    <object id="dashboard1" style="width:900px; height:600px; type="text/html" data="dashboard.html">
    </object>
    </div>

</div>

В файле панели инструментов (dashboard.html) это возможночтобы изменить наборы данных (проанализированный CSV) с помощью кнопки: 

  <!-- here are the buttons to control the two csv data sets -->
  <button id="d1">Data 1 (should be units FTP 2018)</button>
  <button id="d2">Data 2 (should be units FTP 2019)</button>

<!-- The event listeners for buttons -->  
 <script>
    // here are the event listeners to control the buttons
    d3.select("#d1").on("click", function(d, i) {
      data1();
    });
    d3.select("#d2").on("click", function(d, i) {
      data2();
    });

</script>

Поскольку я хочу управлять этим из меню навигации на главном сайте (index.html), должен быть способ разместить кнопки и событияслушатели index.html и изменения наборов данных в панели мониторинга из меню навигации.

Так что index.html должен выглядеть примерно так: 

Buttons
to change datasets within dashboard.html
  <button id="d1">Data 1 (should be units FTP 2018)</button>
  <button id="d2">Data 2 (should be units FTP 2019)</button>

Event listeners
to change datasets within dashboard-file(dashboard.html, embedded through object tag) 
<script>

?????

</script>

    <div id="sales1">   

        <div id="right">

        <object id="dashboard1" style="width:900px; height:600px; type="text/html" data="dashboard.html">
        </object>
        </div>

    </div>

Я загрузил весь код здесь:

Основной сайт (index.html): https://codepen.io/robx360/pen/wbpoQM Панель мониторинга (dashboard.html): https://codepen.io/robx360/pen/pmpNWN

В итоге появятся различные панели мониторинга.Нажав на данные 2019, наборы данных внутри информационных панелей переключают набор данных на 2019 вместо 2018.

...