Question

我尝试使用在浏览器中运行的javascript来构建图表。在使用dimple和d3在浏览器中构建图表之前，脚本从AWS DynamoDB中提取数据。我正在循环数据库扫描的结果，并使用array.push（）将数据添加到数组。结果是绘制了图表轴，但根本没有数据点或线。

目的是绘制一条线图/图表，其中x轴为clientTimeStamp，y轴为airQ。

以下是javascript代码，它位于我的简单HTML页面中的标记内：

//Connect to Dynamo via Cognito Unauthenticated
function getDynamoData() {
  var db, tableName, creds;
  var d3Data = [];

  creds = new AWS.CognitoIdentityCredentials({
    IdentityPoolId: "eu-west-1:xxxxxx" //place cognito Unauthenticated ID pool here
  });

  AWS.config = new AWS.Config({
    region:"eu-west-1",
    credentials: creds
  });

  db = new AWS.DynamoDB();
  tableName = "xxxxxxxx"; //insert your own table name here

  db.scan(params = {TableName: tableName}, function(err, data) {
    data = data.Items;
    //Sort the data by timestamp
    data.sort(function(a, b) {
      return parseFloat(a.clientTimeStamp.N) - parseFloat(b.clientTimeStamp.N);
    });

    data.forEach(function(item){
      d3Data.push({"timeStamp":item.clientTimeStamp.N, "airQ":item.airQ.N});
      console.log(item.airQ.N);
      console.log(item.clientTimeStamp.N);
      console.log(item.clientVer.S);
    })
  })
  drawChart(d3Data, "clientTimeStamp", "airQ");
}

// Draw the chart with dimple
function drawChart(chartData, xLabel, yLabel) {
  var svg = dimple.newSvg("#chartContainer", 800, 600);
  var chart = new dimple.chart(svg, chartData);
  chart.setBounds(60,30, 510, 305);
  chart.addCategoryAxis("x", xLabel);
  chart.addMeasureAxis("y", yLabel);
  chart.addSeries(null, dimple.plot.line);
  chart.draw();
}

getDynamoData();

Answer 1

我找到了自己问题的答案：实质上，必须在db.scan函数内调用drawChart函数。我怀疑这是因为'data'不是全局变量，因此其范围仅限于db.scan函数。之后，需要进行一些小的更改才能在x轴上显示正确的日期。

更正后的代码如下：

//Connect to Dynamo via Cognito Unauthenticated
function getDynamoData() {
  var db, tableName, creds, data;
  var d3Data = [];

  creds = new AWS.CognitoIdentityCredentials({
    IdentityPoolId: "xxxxxxxx" //Insert correct Cognito ID pool here
  });

  AWS.config = new AWS.Config({
    region:"eu-west-1",
    credentials: creds
  });

  db = new AWS.DynamoDB();
  tableName = "xxxxxxxxx";  //Insert correct DynamoDB table name

  db.scan(params = {TableName: tableName}, function(err, data) {

    data = data.Items;
    //Sort the data by timestamp
    data.sort(function(a, b) {
      return parseFloat(a.clientTimeStamp.N) - parseFloat(b.clientTimeStamp.N);
    });

    data.forEach(function(item){
      var dateNum = Number(item.clientTimeStamp.N);
      var myDate = new Date(dateNum);
      var strDate = myDate.toISOString();
      console.log("strDate = " + strDate);
      d3Data.push({"clientTimeStamp":strDate, "airQ":item.airQ.N});
    })
    drawChart(d3Data, "clientTimeStamp", "airQ");
  })
}

// Draw the chart with dimple
function drawChart(chartData, xLabel, yLabel) {
  var iso = d3.time.format("%Y-%m-%dT%H:%M:%S.%LZ");
  var svg = dimple.newSvg("#chartContainer", 800, 600);
  var chart = new dimple.chart(svg, chartData);
  chart.setBounds(60,30, 510, 305);
  var x = chart.addTimeAxis("x", xLabel,"%Y-%m-%dT%H:%M:%S.%LZ","%Y-%m-%d %H:%M:%S");
  x.timePeriod = d3.time.minutes;
  x.timeInterval = 10;
  chart.addMeasureAxis("y", yLabel);
  chart.addSeries(null, dimple.plot.line);
  chart.draw();
}

getDynamoData();

如何将Javascript动态数组传递给d3酒窝图

1 个答案: