我有一個(gè)如下所示的儀表板：Dashboard，儀表將動(dòng)態(tài)顯示信息。我想要實(shí)現(xiàn)的是，當(dāng)按下儀表的“+ INFO”按鈕時(shí)，會(huì)顯示一個(gè)圖表。圖表代碼：HTML： <div id="TemPlot" style="width: 80vw; max-height:60vh;"></div>JavaScript：Plotly.newPlot(myPlotDiv, data, layout, { responsive: true });我的第一個(gè)問(wèn)題是如何將圖表放置在 html 頁(yè)面上，因?yàn)槲也幌Ｍ霈F(xiàn)在所有儀表的末尾。我的第二個(gè)問(wèn)題是如何從腳本中知道我應(yīng)該顯示哪個(gè)圖形來(lái)更新信息。我附上儀表板的代碼，以防有助于理解：<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>
在 HTML 中間附加圖表
至尊寶的傳說(shuō)
2023-10-10 16:13:23
