javascript - 从 DynamoDB 查询更新 ChartJS 折线图

Question

我正在尝试显示收集的 DynamoDB 数据的实时折线图。该图表将显示 3 个数据范围(过去 30 天、过去 7 天、过去 24 小时)。选择范围后，将查询 DynamoDB 并创建 ChartJS 折线图。绘制初始图表后，Dynamo 将每 5 秒再次查询一次，并且图表将使用新查询的结果进行更新。

由于某种原因，.update() 调用向图表中添加了重复数据。我确信这是因为查询将提取一些与原始查询相同的数据，但我的印象是更新调用将重新呈现图表的数据，所以我不明白为什么会有重复的数据。

相关代码如下:

var getDateTimeStr = function(hours){
  //create a string of the date and time 30 days ago
  var ts = new Date().getTime();
  var tsYest = (ts - (hours /*hrs in 30 days*/ * 3600) * 1000);
  var d = new Date(tsYest);
  var yestDateStr = d.getFullYear() + '/'
  + ('0' + (d.getMonth()+1)).slice(-2) + '/'
  + ('0' + d.getDate()).slice(-2) + ' '
  + ('0' + (d.getHours()+1)).slice(-2) + ':'
  + ('0' + (d.getMinutes()+1)).slice(-2) + ':'
  + ('0' + (d.getSeconds()+1)).slice(-2);
  console.log(yestDateStr);
  return yestDateStr;
}

//PARAMETERS FOR 3 RANGES
var params1 = {
  TableName: "O2Sensor_data",
  ConsistenRead: false,
  ScanindexForward: true,
  KeyConditionExpression: "sensor_id = :sensor AND #dtdt >= :start_date",
  ExpressionAttributeNames: {
  "#dtdt": "DateTime"
},
  ExpressionAttributeValues: {
    ":sensor": "sensor1",
    ":start_date": getDateTimeStr(720)
  }
}

var params2 = {
  TableName: "O2Sensor_data",
  ConsistenRead: false,
  ScanindexForward: true,
  KeyConditionExpression: "sensor_id = :sensor AND #dtdt >= :start_date",
  ExpressionAttributeNames: {
    "#dtdt": "DateTime"
  },
  ExpressionAttributeValues: {
    ":sensor": "sensor1",
    ":start_date": getDateTimeStr(168)
  }
}

var params3 = {
  TableName: "O2Sensor_data",
  ConsistenRead: false,
  ScanindexForward: true,
  KeyConditionExpression: "sensor_id = :sensor AND #dtdt >= :start_date",
  ExpressionAttributeNames: {
    "#dtdt": "DateTime"
  },
  ExpressionAttributeValues: {
    ":sensor": "sensor1",
    ":start_date": getDateTimeStr(24)
  }
}

//DYNAMODB QUERY FUNCTION
function chartCreate(params, color){
    console.log("Querying DynamoDB");
    docClient.query(params, function(err, data){
      if(err) console.log(err, err.stack);
      else{
        DateTimeArr = [];
        o2readingArr = [];
        data.Items.forEach(function(item){
          DateTimeArr.push(item.DateTime.toString());
          o2readingArr.push(item.o2percent.toString());
  });

      var dataMap = {
        type: 'line',
        data: {//displays readings form sensor based on the range selected
          labels: DateTimeArr,
          datasets: [{
            label: '% O2 In Air',
            data: o2readingArr,
            backgroundColor: color
          },
          {//creates a line at 19.5% to see if data readings are below safe         value
            label: "19.5%",
            data: Array.apply(null, new  Array(o2readingArr.length)).map(Number.prototype.valueOf, 19.5),
            fill: false,
            radius: 0,
            borderColor: "rgba(0,0,0,.5)"
          }]//end of datasets
        },
        options: {
          animation: false,
          responsive: true,
          scaleOverride: true
        }
      };//end of dataMap var declaration

      //CREATE CHART
      var ctx = document.getElementById("lineChart").getContext("2d");
        ctx.canvas.width = 600;
        ctx.canvas.height = 256;
      window.datChart = new Chart(ctx, dataMap);
    }//end of else statement
  });//end of query function
}

function chartUpdate(params){
  console.log("Querying DynamoDB");
  docClient.query(params, function(err, data){
    if(err) console.log(err, err.stack);
    else{
      data.Items.forEach(function(item){
        DateTimeArr.push(item.DateTime.toString());
        o2readingArr.push(item.o2percent.toString());
       });
    }
  });
}

function chooseChart(){
  if(window.datChart){window.datChart.destroy();}
  if(document.getElementById("sel1").value == "last30"){
    currParams = params1;
    currColor = "rgba(0,0,255,.8)";
    chartCreate(params1, "rgba(0,0,255,.8)");
  }//blue
  else if(document.getElementById("sel1").value == "last7"){
    currParams = params2;
    currColor = "rgba(0,255,0,.8)";
    chartCreate(params2, "rgba(0,255,0,.8)");
  }//green
  else if(document.getElementById("sel1").value == "last24"){
    currParams = params3;
    currColor = "rgba(255,0,0,.8)";
    chartCreate(params3, "rgba(255,0,0,.8)");
  }//red
  else{console.log("something went wrong in chooseChart function");}
}

chooseChart();

setInterval(function(){
  window.datChart.destroy();
  chartUpdate(currParams);
  window.datChart.update();
}, 5000);

我尝试过其他方法，例如每次完全重绘图表，但这会导致网页上闪烁，这相当烦人。我不确定如何让它发挥作用，以便图表仅使用新数据进行更新。

任何帮助或建议将不胜感激。谢谢。

Answer 1

我编写了一个函数来检查已存储在数组中的日期，它现在看起来运行良好。

这是函数:

var isinArr = function(str){
  for(i=0; i<DateTimeArr.length; i++){
    if(str === DateTimeArr[i]){
      return true;
    }
  }
  return false;
}

这是更新后的 ChartUpdate() 函数:

function chartUpdate(params){
  console.log("Querying DynamoDB");
  docClient.query(params, function(err, data){
    if(err) console.log(err, err.stack);
    else{
      data.Items.forEach(function(item){
        if(!isinArr(item.DateTime.toString())){
          DateTimeArr.push(item.DateTime.toString());
          o2readingArr.push(item.o2percent.toString());
        }
      });
    }
  });
}