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

Question

这是我的日期时间格式“2018.01.16 14:35:40”。我从 dynamodb 数据库中以字符串形式获取这些数据。现在，我需要将日期和时间提取为 2 个不同变量中的数字，以使用 javascript 绘制散点图。为此，我需要将此格式格式化为 Date(2018,01,16) 和 Date(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));
    }

任何人都可以给我提示或解决方案，我怎样才能单独提取日期和时间以在散点图中显示它？提前致谢。

Answer 1

首先，我建议先加载 google。

然后，使用列类型 timeofday 作为 y 轴。

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

请参阅以下代码片段...

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));
    }
  }
});

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

Extract date and time from dynamodb timestamp data in javascript for scatter plot

javascript

date

google-visualization

scatter-plot

amazon-dynamodb