使用ajax从数据库收到新数据后更新chart.js不起作用

Question

这是我在脚本中初始化图表的脚本

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...在脚本开头全局声明

Answer 1

问题是我正在传递一个对象，而它需要一个数组。Myvar Data是包含多个 JSON 对象的单个 JSON 对象。在我应用之后valueTemp = JSON.parse(Data.temperature);，它返回一个温度值数组，这正是我所需要的。

Answer 2

您是否尝试过以 DOM 对象的形式访问更新函数？window.myChartTemp.update();或者&nbsp;document.myChartTemp.update();