亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

使用ajax從數據庫收到新數據后更新chart.js不起作用

使用ajax從數據庫收到新數據后更新chart.js不起作用

眼眸繁星 2024-01-11 10:46:11
這是我在腳本中初始化圖表的腳本JavaScript$(document).ready( () => {    setInterval( () => {    var sensorUpdatedData = new XMLHttpRequest();    sensorUpdatedData.onreadystatechange = () => {      if(sensorUpdatedData.readyState === 4) {        if(sensorUpdatedData.status === 200) {          console.log("ready");                     var Data = JSON.parse(sensorUpdatedData.responseText);          console.log(Data);          valueTemp = Data.temperature;          valueHum = Data.humidity;          valueSmoke = Data.smoke;          reading_time = Data.reading_time;          reading_time_hour = Data.reading_time_hour;          myChartTemp.update();          myChartHum.update();          myChartSmoke.update();          myChartData.update();        } else {          alert('Error Code: ' +  sensorUpdatedData.status);          alert('Error Message: ' + sensorUpdatedData.statusText);        }      }    }      sensorUpdatedData.open('POST', 'data.php', true);      sensorUpdatedData.send();    }, 5000);  });所有值都正確更新(我用一些 console.log 進行了測試)這就是我創建其中一張圖表的方式:var ctxTempChart = document.getElementById("chartLineTemp").getContext("2d");    var gradientStrokeTempChart = ctxTempChart.createLinearGradient(0, 230, 0, 50);    gradientStrokeTempChart.addColorStop(1, 'rgba(29,140,248,0.2)');    gradientStrokeTempChart.addColorStop(0.4, 'rgba(29,140,248,0.0)');    gradientStrokeTempChart.addColorStop(0, 'rgba(29,140,248,0)'); //blue colors    var dataTemp = {      labels: reading_time_hour,      datasets: [{        label: "Temperature",        fill: true,        backgroundColor: gradientStrokeTempChart,  });超文本標記語言 <canvas id="chartLineTemp"></canvas>一切似乎都工作正常,但我不知道如何顯示更新的數據。vavalueTemp、valueHum...在腳本開頭全局聲明
查看完整描述

2 回答

?
慕沐林林

TA貢獻2016條經驗 獲得超9個贊

問題是我正在傳遞一個對象,而它需要一個數組。Myvar Data是包含多個 JSON 對象的單個 JSON 對象。在我應用之后valueTemp = JSON.parse(Data.temperature);,它返回一個溫度值數組,這正是我所需要的。



查看完整回答
反對 回復 2024-01-11
?
阿波羅的戰車

TA貢獻1862條經驗 獲得超6個贊

您是否嘗試過以 DOM 對象的形式訪問更新函數?

window.myChartTemp.update();或者 document.myChartTemp.update();


查看完整回答
反對 回復 2024-01-11
  • 2 回答
  • 0 關注
  • 161 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號