我有一个 .Net Core 应用程序,我在其中绘制了一个图表,显示一天中某些测量值的值。
我的“时间”对象是 Unix 时间,以毫秒为单位(例如 1502258405000)。我已经设法将其手动转换为时间对象,如下所示:
var datetimes = $.map(data, function (value, index) {
var datetime = new Date(value.timestamp);
var iso = datetime.toISOString().match(/(\d{4}\-\d{2}\-\d{2})T(\d{2}:\d{2}:\d{2})/);
return iso[2]; //Returns HH:MM:SS
});
然而,通过这种转换,我的 chart.js 图表无法将时间对象理解为时间,这意味着(如果测量中存在间隙)它不会显示(并且存在),因为它只会将测量值放在下一个彼此并将它们作为字符串处理。
我对显示日期不感兴趣,因为数据总是会在已知日期内收集。我将上面的实现更改为:
var datetimes = $.map(gpsData, function (value, index) {
return new Date(value.timestamp);
});
然而,当我在我的 chart.js 折线图上绘制它时,它使我的图表显示不需要的 AM/PM 值,如上所示。我想要一个 24 小时制的时钟。我使用 chart.js 时间值作为 xAxis
如下所示绘制上图中所示的值:
options: {
scales: {
xAxes: [{
type: 'time',
time: {
format: "HH:MM:SS",
min: minTime, //calculated above in my implementation
max: maxTime //same as above
}
}]
}
}
但是,这些值未按照我想要的输出进行格式化。所以我想知道使用 chart.js 将 一天中的时间 添加到图表上的 x 轴的正确方法是什么,甚至如何将其格式化为我想要的值?
原文由 Zeliax 发布,翻译遵循 CC BY-SA 4.0 许可协议
我发现这对于 Chart.js 是不可能的,所以我改用支持此功能的 Highcharts.js。
以下是我的解决方案代码:
最终结果如下所示: