我有一個如下所示的儀表板：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>
1 回答
函數式編程
TA貢獻1807條經驗 獲得超9個贊
僅使用類會有點復雜，但您可以使用：
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>
- 1 回答
- 0 關注
- 93 瀏覽
添加回答
舉報
0/150
提交
取消