时间戳

首页 > 解决方案 > 在 HTML 中间附加一个图表

javascript - 在 HTML 中间附加一个图表

问题描述

我有一个仪表板，看起来像这样：Dashboard，仪表将动态显示信息。我想要实现的是，当按下仪表的“+ INFO”按钮时，会显示一个图表。图表代码：

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

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

我的第一个问题是如何将图表放在 html 页面上，因为我不希望它出现在所有仪表的末尾。我的第二个问题是如何从脚本中知道我应该显示哪个图形来更新信息。

我附上了仪表板的代码，以防有助于理解：

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

非常感谢。

标签： javascripthtmlcss

解决方案

仅使用类会有点复杂，但您可以使用：

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”按钮上添加一个 id，或者在 javascript 中动态创建按钮，以便稍后获取它，例如：

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

推荐阅读