我有一个.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);
});

javascript - Chart.js在xAxis上显示时间(HH:MM:SS-24小时制)-LMLPHP

但是,当我将其绘制在chart.js折线图上时,它使我的图表显示不需要的AM / PM值,如上所示。我想有一个24小时制。我使用了xAxis的chart.js时间值,如下图所示,绘制了如上图所示的值:
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轴上的正确方法是什么,或者甚至如何格式化它的期望值?

最佳答案

实际上,这是受支持的(至少在最新版本的chartjs中)。

似乎您必须为chartjs可以显示的所有不同格式指定格式。

检查:
https://www.chartjs.org/docs/latest/axes/cartesian/time.html#display-formats

在我的项目中,以下对我有用:

 xAxes: [{
    type: 'time',
    time: {
        parser: timeFormat,
        // round: 'day'
        tooltipFormat: 'YYYY-MM-DD HH:mm',
        displayFormats: {
            millisecond: 'HH:mm:ss.SSS',
            second: 'HH:mm:ss',
            minute: 'HH:mm',
            hour: 'HH'
        }
    },
    display: true,
    scaleLabel: {
        display: true,
        labelString: 'Time'
    }
 }],

关于javascript - Chart.js在xAxis上显示时间(HH:MM:SS-24小时制),我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/45589026/

10-12 12:20
查看更多