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

【问题标题】：Updating chart.js not working after recieved new data from database with ajax使用ajax从数据库接收新数据后更新chart.js不起作用
【发布时间】：2020-07-31 22:01:16
【问题描述】：

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

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,
        borderColor: '#1f8ef1',
        borderWidth: 2,
        borderDash: [],
        borderDashOffset: 0.0,
        pointBackgroundColor: '#1f8ef1',
        pointBorderColor: 'rgba(255,255,255,0)',
        pointHoverBackgroundColor: '#1f8ef1',
        pointBorderWidth: 20,
        pointHoverRadius: 4,
        pointHoverBorderWidth: 15,
        pointRadius: 4,
        data: valueTemp,
      }]
    };

    var myChartTemp = new Chart(ctxTempChart, {
      type: 'line',
      data: dataTemp,
      options: gradientBarChartConfigurationTempSmall

    });

HTML

 <canvas id="chartLineTemp"></canvas>

似乎一切正常，但我不知道如何显示更新的数据。 vavalueTemp, valueHum... 在脚本开始时全局声明

更新如果我添加这个：

myChartTemp.data.labels = reading_time_hour; 
myChartTemp.data.datasets[0].data = valueTemp; 
window.myChartTemp.update();

我得到了这个（还有文档）：无法读取 XMLHttpRequest.sensorUpdatedData.onreadystatechange 处未定义的属性“更新”

如果我这样走：

myChartTemp.data.labels = reading_time_hour;
myChartTemp.data.datasets[0].data = valueTemp;
myChartTemp.update();

（前面没有窗口或文档）我得到了：TypeError: Object.defineProperty called on non-object

【问题讨论】：

你的valueTemp 是一个对象吗？你能展示一下它的结构吗？
这就是问题所在，我正在传递一个对象，它需要一个数组。我的var Data 是一个包含多个 JSON 对象的 JSON 对象。在我应用valueTemp = JSON.parse(Data.temperature); 之后，它返回了一组温度值，这正是我所需要的。非常感谢！

标签： javascript php html database chart.js

【解决方案1】：

您是否尝试过将更新函数作为 DOM 对象访问？

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

【讨论】：

如果我添加这个：myChartTemp.data.labels = reading_time_hour; myChartTemp.data.datasets[0].data = valueTemp; window.myChartTemp.update(); ，我得到了这个（还有文档）：Cannot read property 'update' of undefined at XMLHttpRequest.sensorUpdatedData.onreadystatechange 如果我这样做： myChartTemp.data.labels = reading_time_hour; myChartTemp.data.datasets[0].data = valueTemp; myChartTemp.update(); （前面没有窗口或文档，我得到了：TypeError: Object.defineProperty called on non-object
也许问题是我在同一个文件中设置了仪表板的 setInterval 函数和脚本？ stackoverflow.com/users/11951277/alexander-riedel
您的console.log(Data); 是否每五秒向控制台打印一次输出？

【解决方案2】：

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

【讨论】：