Javascript Chart.js显示xAxis上的时间（小时：毫米：秒-24小时时钟）

我有一个.Net核心应用程序，我在其中绘制一个图表，显示一天中某些测量值

我的“时间”对象是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 chart无法将时间对象理解为时间，这意味着（如果测量值中存在间隙），它将不会显示（并且存在），因为它只会将测量值彼此相邻，并将它们作为字符串处理

我对显示日期不感兴趣，因为数据总是在已知日期内收集的。我将上述实施更改为：

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轴上添加时间的正确方法是什么，甚至是如何将其格式化为我所需的值？
我发现chart.js无法实现这一点，因此我改为使用Highcharts.js，它支持此功能

下面是我的解决方案代码：

function tripSpeedsLineGraph() {
    var gpsData = @Html.Raw(Json.Serialize(Model.gpsData));

    chartData = []
    var reqData = $.map(gpsData, function (value, index) {
         chartData.push([new Date(value.timestamp), value.sp]);
    });

    var chart = Highcharts.chart('tripSpeedsLineChart', {
        chart: {
            type: 'spline',
            zoomType: 'x',
            panning: true,
            panKey: 'shift'
        },
        title: {
            text: "Speed during trip"
        },
        subtitle: {
            text: 'Click and drag to zoom in. Hold down shift key to pan.'
        },
        xAxis: {
            type: 'datetime',
            dateTimeLabelFormats: {
                day: '%b %H:%M:%S'
            },
            title: {
                text: 'Time of day'
            }
        },
        yAxis: {
            title: {
                text: 'Speed'
            },
            min: 0
        },
        tooltip: {
            crosshairs: [true],
            formatter: function () {
                return "Datetime: " + moment.utc(moment.unix(this.x/1000)).format("DD/MM-YYYY HH:mm:ss") + "<br> Speed: " + this.y;
            }
        },
        series: [{
            name: 'Speed Data',
            data: chartData
        }]
    });
}

函数tripSpeedsLineGraph（）{
var gpsData=@Html.Raw（Json.Serialize（Model.gpsData））；
chartData=[]
var reqData=$.map（gpsData，函数（值，索引）{
push（[新日期（value.timestamp），value.sp]）；
});
var图表=Highcharts.chart（'tripSpeedsLineChart'{
图表：{
类型：“样条线”，
zoomType:'x'，
平移：是的，
一键：“移位”
},
标题：{
文字：“行程中的速度”
},
副标题:{
文本：“单击并拖动可放大。按住shift键可平移。”
},
xAxis：{
键入：“日期时间”，
日期时间标签格式：{
日期：'%b%H:%M:%S'
},
标题：{
文字：“一天中的时间”
}
},
亚克斯：{
标题：{
文字：“速度”
},
最低：0
},
工具提示：{
十字准星：[正确]，
格式化程序：函数（）{
返回“Datetime:+moment.utc（moment.unix（this.x/1000））.format（“DD/MM-YYYY HH:MM:ss”）+”
速度：+this.y；
}
},
系列：[{
名称：“速度数据”，
数据：图表数据
}]
});
}

最终结果如下所示：

试试这个：

scales: {
  xAxes: [{
    type: 'time',
    time: {
      unit: 'minute',
      unitStepSize: 30,
      displayFormats: {
         'minute': this.person.Use24h ? 'HH:mm' : 'hh:mm A'
      }
    }
  }]
}

实际上，这是受支持的（至少在最新版本的chartjs中是如此）

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

检查：

在我的项目中，以下是我的工作：

 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'
    }
 }],

使用Chart.js v2.9.4，对我来说这很有效：

scales: {
  xAxes: [{
    type: 'time',
    time: {
      displayFormats: {hour: 'HH:mm'}
    }
  }]
 }

您是否尝试过使用此解决方案设置日期格式？是的。我能想到的所有组合都与这个解决方案结合在一起。问题似乎在于，经过长时间的研究，Chart.js不支持24小时制。我在他们的文档中找不到任何与此相反的内容。你能给我一个JSFIDLE吗？也许你必须手动编写xAxis，我会马上去做的。或者你可以尝试使用ticks函数来定制你的xAxis，我只是对其他ppl的演示做了一个简单的更改，祝你好运。似乎不起作用，也许您可以添加一个演示片段。