在 HTML 中间附加图表

Question

我有一个如下所示的仪表板：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>

Answer 1

仅使用类会有点复杂，但您可以使用：let myelement = document.getElementsByClassName("classname")[indexoftheelement];已弃用。但是您可以通过了解并手动输入元素的索引来获取元素。一旦获得所需的元素，您就可以使用appendChild添加所需的内容：//getting your elementlet element=document.getElementsByClassName("myclass")[0];//creating p html taglet mycontent = document.createElement("p");//putting text into itmycontent.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>