从javascript中的dynamodb时间戳数据中提取日期和时间,用于散点图
这是我的日期时间格式“2018.01.16 14:35:40”。我从dynamodb数据库中以字符串的形式获取这些数据。现在,我需要将日期和时间提取为两个不同变量中的数字,以便使用javascript绘制散点图。为此,我需要将此格式设置为日期(2018,01,16)和日期(2018,01,16,14,35)格式。第一个用于x轴上的日期行,第二个用于y轴上的时间行。我没有找到任何javascript函数来实现这一点。我正在尝试使用toLocaleDateString和toLocaleTimeString函数来实现这一点。但这些都不起作用。这是我的密码从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
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。其余的事情都是正确的。我已为最终代码解决方案编辑了您的代码。谢谢你的解决方案。