Javascript 无法在图表的x轴上显示日期
我想在x中显示日期,但无法显示。在图形中显示类似于此的值00.00.00.100。无法将15778440000转换为正确的日期、月份、年份(javascript),以便在highcharts中使用DateTimeLabelFormat在x轴上显示。如何使用刻度以及如何在图形中显示刻度。 刻度值在控制台中的打印方式如下。 样本勾号数据Javascript 无法在图表的x轴上显示日期,javascript,jquery,ajax,datetime,highcharts,Javascript,Jquery,Ajax,Datetime,Highcharts,我想在x中显示日期,但无法显示。在图形中显示类似于此的值00.00.00.100。无法将15778440000转换为正确的日期、月份、年份(javascript),以便在highcharts中使用DateTimeLabelFormat在x轴上显示。如何使用刻度以及如何在图形中显示刻度。 刻度值在控制台中的打印方式如下。 样本勾号数据 1577844000000 1577843100000 1577842200000 1577841300000 157784
1577844000000
1577843100000
1577842200000
1577841300000
15778404000
来自响应的样本数据
DeviceTimeStamp: "2020-01-10T00:30:00"
代码
您可以使用以下方法转换json日期:
var jsonDate=“\/Date(15778440000)\/”。substr(6);
var dateObject=新日期(parseInt(jsonDate));
变量stringDate=(dateObject.getMonth()+1)+“/”+dateObject.getDate()+“/”+dateObject.getFullYear();
log(“Dat对象:“+dateObject”);
日志(“字符串日期:+stringDate”)你能提供一个JSFIDLE或CodePen吗?图像几乎看不见。但我没有保留工作api。嗨@krishna mohan,您需要将日期值转换为时间戳。控制台中的值现在变得正确了,但如何输入x轴有什么想法吗?更新的问题是此示例解决了您的问题吗?因为我相信您的hightcharts代码缺少类别部分感谢更新图表正在工作,但我主要关心的是数据超过时。它以垂直方式显示日期。我只想展示几个日期,我正在尝试一些勾号或日期时间标签格式。请用大约20个值尝试相同的代码,你会发现问题所在这是当图表无法显示它试图以多种方式显示的完整列表时,hightcharts的响应行为,如垂直文本和隐藏小值
getalldata();
function getalldata() {
var xhttp_roomlogs = new XMLHttpRequest();
xhttp_roomlogs.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
var response = JSON.parse(xhttp_roomlogs.responseText);
var Ch1Temp = [];
var Ch2Temp = [];
$(response).each(function (i, item) {
var date = UtcToIst(item.DeviceTimeStamp);
var ticks = Date.UTC(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds());
Ch1Temp.push([ticks, item.Ch1Temp])
Ch2Temp.push([ticks, item.Ch2Temp])//
});
$('#container').empty();
var labels = response.map(function (e) {
var roomtempdata = e.Ch1Temp;
return parseFloat(roomtempdata);
})
var ch2temp = response.map(function (e) {
var roomtempdata = e.Ch2Temp;
return parseFloat(roomtempdata);
})
Highcharts.chart('container', {
credits: {
enabled: false
},
title: {
text: 'Chamber 1 & 2 Temp'
},
subtitle: {
text: 'in Degree Celcius'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { // don't display the dummy year
month: '%e. %b',
year: '%b'
},
title: {
text: 'Date'
}
},
yAxis: {
title: {
text: 'Temperature'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
//y co-ordinates
series: [{
name: 'Chamber 1 Temp',
data: labels
},
{
name: 'Chamber 2 Temp',
data: ch2temp
}
],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
//highcharts end
}
};
xhttp_roomlogs.open("GET", "/api/data", true);
xhttp_roomlogs.send();
}
function UtcToIst(data) {
var dt = new Date(data);
return dt;
}