从javascript中的dynamodb时间戳数据中提取日期和时间,用于散点图

从javascript中的dynamodb时间戳数据中提取日期和时间,用于散点图,javascript,date,google-visualization,amazon-dynamodb,scatter-plot,Javascript,Date,Google Visualization,Amazon Dynamodb,Scatter Plot,这是我的日期时间格式“2018.01.16 14:35:40”。我从dynamodb数据库中以字符串的形式获取这些数据。现在,我需要将日期和时间提取为两个不同变量中的数字,以便使用javascript绘制散点图。为此,我需要将此格式设置为日期(2018,01,16)和日期(2018,01,16,14,35)格式。第一个用于x轴上的日期行,第二个用于y轴上的时间行。我没有找到任何javascript函数来实现这一点。我正在尝试使用toLocaleDateString和toLocaleTimeStr

这是我的日期时间格式“2018.01.16 14:35:40”。我从dynamodb数据库中以字符串的形式获取这些数据。现在,我需要将日期和时间提取为两个不同变量中的数字,以便使用javascript绘制散点图。为此,我需要将此格式设置为日期(2018,01,16)和日期(2018,01,16,14,35)格式。第一个用于x轴上的日期行,第二个用于y轴上的时间行。我没有找到任何javascript函数来实现这一点。我正在尝试使用toLocaleDateString和toLocaleTimeString函数来实现这一点。但这些都不起作用。这是我的密码

    function onScan(err, data) {
            if (err) {
                document.getElementById('textarea').innerHTML += "Unable to scan the table: " + "\n" + JSON.stringify(err, undefined, 2);
            } else {
                var clickDate, clickTime;
                data.Items.forEach(function (iotButton) {
                    clickDate = iotButton.TimeStamp.toLocaleDateString(undefined, {
                        day: 'numeric',
                        month: 'numeric',
                        year: 'numeric'});

                    clickTime = iotButton.TimeStamp.toLocaleTimeString({
                    hour: '2-digit',
                            minute: '2-digit',
                    second: '2-digit'
                });

                drawChart(clickDate, clickTime);
            }
            );
        }
        }
    google.charts.load('current', {'packages': ['scatter']});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart(clickDate, clickTime) {
        var data = new google.visualization.DataTable();
        data.addColumn('date', 'Date');
        data.addColumn('number', 'Time');

        data.addRows([
            [clickDate, clickTime]
        ]);

        var options = {
            width: 700,
            height: 500,
            refreshInterval: 5,
            chart: {
                title: 'Rundzeiten nach Messzeitpunkt'
            },
            hAxis: {title: 'Date'},
            vAxis: {title: 'Time'}
        };

        var chart = new google.charts.Scatter(document.getElementById('scatterchart_material'));

        chart.draw(data, google.charts.Scatter.convertOptions(options));
    }

有人能给我一些提示或解决方案吗?我如何分别提取日期和时间,并在散点图中显示出来?提前谢谢。

首先,我建议先加载google

然后,对y轴使用列类型
timeofday

然后,您可以拆分各个部分上的日期字符串以添加行

请参阅以下代码段

google.charts.load('current', {
  packages: ['scatter']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Date');
  data.addColumn('timeofday', 'Time');

  var chart = new google.charts.Scatter(document.getElementById('scatterchart_material'));

  var options = {
    width: 700,
    height: 500,
    chart: {
      title: 'Rundzeiten nach Messzeitpunkt'
    },
    hAxis: {title: 'Date'},
    vAxis: {title: 'Time'}
  };

  // execute method that calls onScan here

  function onScan(err, data) {
    if (err) {
      document.getElementById('textarea').innerHTML += "Unable to scan the table: " + "\n" + JSON.stringify(err, undefined, 2);
    } else {
      data.Items.forEach(function (iotButton) {
        var dateParts = iotButton.TimeStamp.split(' ');
        var clickDate = dateParts[0].split('.');
        var clickTime = dateParts[1].split(':');

        data.addRow([
          new Date(parseInt(clickDate[0]), parseInt(clickDate[1])-1, parseInt(clickDate[2])),
          [parseInt(clickTime[0]), parseInt(clickTime[1]), parseInt(clickTime[2])]
        ]);
      });
      chart.draw(data, google.charts.Scatter.convertOptions(options));
    }
  }
});

不需要使用parseInt感谢您的解决方案@WhiteHat。看起来你的代码是正确的。但有一个错误是“data.addRow不是函数”。我不明白这个错误。解决了那个问题。由于我的数据库值和绘图数据的变量“data”相同,因此存在冲突。所以对于onScan函数参数,我使用dbdata而不是data。所以我的foreach现在是dbdata.Items.foreach。其余的事情都是正确的。我已为最终代码解决方案编辑了您的代码。谢谢你的解决方案。