Добавить диаграмму в середине HTML

Question

У меня есть приборная панель, которая выглядит следующим образом: Приборная панель , датчики будут отображать информацию динамически. Чего я хочу добиться, так это то, что при нажатии кнопки «+ INFO» на датчике график отображается. код диаграммы:

HTML: <div id="TemPlot" style="width: 80vw; max-height:60vh;"></div>

JavaScript: Plotly.newPlot(myPlotDiv, data, layout, { responsive: true });

Моя первая проблема - как разместить диаграмму на html страница, так как я не хочу, чтобы он появлялся в конце всех датчиков. Моя вторая проблема заключается в том, как узнать из сценария, какие графики c мне следует показать для обновления информации.

Я прилагаю код панели инструментов на случай, если это будет полезно понять:

<main>
  <section class="cards">
    <div class="card">
      <div class="card__image-container">
        <canvas id="gauge1"></canvas>
      </div>
      <div class="card__content">
        <p class="card__title text--medium">
          Sensor Information
        </p>
        <div class="card__info">
          <p class="text--medium">30 Min</p>
          <p class="card__price text--medium">+INFO</p>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card__image-container">
        <canvas id="gauge2"></canvas>
      </div>
      <div class="card__content">
        <p class="card__title text--medium">
          Sensor Information
        </p>
        <div class="card__info">
          <p class="text--medium">30 Min</p>
          <p class="card__price text--medium">+INFO</p>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card__image-container">
        <canvas id="gauge3"></canvas>
      </div>
      <div class="card__content">
        <p class="card__title text--medium">
          Sensor Information
        </p>
        <div class="card__info">
          <p class="text--medium">30 Min</p>
          <p class="card__price text--medium">+INFO</p>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card__image-container">
          <canvas id="gauge4"></canvas>
      </div>
      <div class="card__content">
        <p class="card__title text--medium">
          Sensor Information
        </p>
        <div class="card__info">
          <p class="text--medium">30 Min</p>
          <p class="card__price text--medium">+INFO</p>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card__image-container">
        <canvas id="gauge5"></canvas>
      </div>
      <div class="card__content">
        <p class="card__title text--medium">
          Sensor Information
        </p>
        <div class="card__info">
          <p class="text--medium">30 Min</p>
          <p class="card__price text--medium">+INFO</p>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card__image-container">
        <canvas id="gauge6"></canvas>
      </div>
      <div class="card__content">
        <p class="card__title text--medium">
          Sensor Information
        </p>
        <div class="card__info">
          <p class="text--medium">30 Min</p>
          <p class="card__price text--medium">+INFO</p>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card__image-container">
        <canvas id="gauge7"></canvas>
      </div>
      <div class="card__content">
        <p class="card__title text--medium">
          Sensor Information
        </p>
        <div class="card__info">
          <p class="text--medium">30 Min</p>
          <p class="card__price text--medium">+INFO</p>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card__image-container">
        <canvas id="gauge8"></canvas>
      </div>
      <div class="card__content">
        <p class="card__title text--medium">
          Sensor Information
        </p>
        <div class="card__info">
          <p class="text--medium">30 Min</p>
          <p class="card__price text--medium">+INFO</p>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card__image-container">
        <canvas id="gauge9"></canvas>
      </div>
      <div class="card__content">
        <p class="card__title text--medium">
          Sensor Information
        </p>
        <div class="card__info">
          <p class="text--medium">30 Min</p>
          <p class="card__price text--medium">+INFO</p>
        </div>
      </div>
    </div>
  </section>
</main>

Большое спасибо.

Answer 1

Это будет немного сложно только с классами, но вы можете использовать:

let myelement = document.getElementsByClassName("classname")[indexoftheelement];

, что устарело. Но вы можете получить свой элемент, зная и набрав вручную его индекс. Как только вы получили нужный элемент, вы можете добавить нужный контент, используя appendChild:

//getting your element
let element=document.getElementsByClassName("myclass")[0];
//creating p html tag
let mycontent = document.createElement("p");
//putting text into it
mycontent.textContent = "hello";
//adding it to the element you want :
element.appendChild(mycontent);

<div class="myclass"></div>

Что касается второго вопроса, вы можете добавить идентификатор на кнопку "+ INFO" или динамически создать кнопки в javascript, чтобы получить его позже, например:

let myText = document.createElement("p");
myText.textContent = "hello";
mybutton1.onclick = ()=>{document.body.appendChild(myText)};

<button id="mybutton1">click</button>