javascript - Chart.js 显示时间 (HH :MM:SS - 24 hour clock) on xAxis

Question

我有一个 .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 小时制的时钟。我使用了 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 轴的正确方法是什么，甚至如何将其格式化为我想要的值？

Answer 1

实际上这是支持的(至少在最新版本的 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'
    }
 }],