ChartJS 上的 XMLHTTPRequest 重复条目

Question

我正在使用 XMLHTTPRequest 从 PHP 文件接收数据。 PHP 文件将回显一个数字，例如 6，XMLHTTPRequest 将抓取它。这是使图表变得生动的尝试。

我遇到的问题与 ChartJS 和这些请求有关。

var Data;

function loadXMLDOC() {
var request = new XMLHttpRequest(); // create http request
request.onreadystatechange = function() {
if (request.readyState == 4 && request.status == 200) {
Data = this.responseText;

  myChart.data.labels.push(" ");
  myChart.data.datasets[0].data.push(Data);

  // re-render the chart
  myChart.update();
  }
}
request.open('GET', "data.php", true);
request.send(); // send the request
}
setInterval(function(){
   loadXMLDOC();
}, 1000)

window.onload = loadXMLDoc;

当我从数据库中获取这些数字时，我只需要该数字一次。但是，它会多次重复该数字，而不是一次。 ChartJS 上重复的数字 我想知道如何只获取一次号码，并且在下一个号码到来之前不会重复多次？

Answer 1

正如曼努埃尔建议的，您可以检查最新添加的号码是否与您要添加的号码相同。如果是这种情况，请不要添加它。这样做的副作用是，如果下一个数字实际上与上一个数字相同，则也不会被添加。要实现此目的，您可以将您的功能更改为：

if (request.readyState == 4 && request.status == 200) {
    Data = this.responseText;
    const chartData = myChart.data.datasets[0].data;

    if (chartData[chartData.length - 1] === Data) {
        return;
    }

    myChart.data.labels.push(" ");
    myChart.data.datasets[0].data.push(Data);

    // re-render the chart
    myChart.update();
}

另一种选择是让 PhP 不发送号码（如果已经发送）。