Question

当我通过options.scales.xAxes.time.tooltipFormat将鼠标悬停在折线图上的数据点上时，我能够格式化工具提示，但我似乎无法为x轴刻度标记执行此操作。我的data.labels是一组时刻对象。它们显示为"MMM DD, YYYY"（例如2012年2月23日），但我想放弃这一年。

Answer 1

只需将所有选定的时间单位displayFormat设置为MMM DD

即可

options: {
  scales: {
    xAxes: [{
      type: 'time',
      time: {
        displayFormats: {
           'millisecond': 'MMM DD',
           'second': 'MMM DD',
           'minute': 'MMM DD',
           'hour': 'MMM DD',
           'day': 'MMM DD',
           'week': 'MMM DD',
           'month': 'MMM DD',
           'quarter': 'MMM DD',
           'year': 'MMM DD',
        }
        ...

请注意，我已将所有单位的显示格式设置为MMM DD。更好的方法是，如果您可以控制数据的范围和图表大小，就会强制一个单位，就像这样

options: {
  scales: {
    xAxes: [{
      type: 'time',
      time: {
        unit: 'day',
        unitStepSize: 1,
        displayFormats: {
           'day': 'MMM DD'
        }
        ...

小提琴 - http://jsfiddle.net/prfd1m8q/

Answer 2

根据Chart js文档页面tick configuration section。您可以使用回调函数格式化每个tick的值。例如，我想将显示日期的区域设置更改为始终为德语。在轴选项的刻度部分

ticks: {
    callback: function(value) { 
        return new Date(value).toLocaleDateString('de-DE', {month:'short', year:'numeric'}); 
    },
},

Answer 3

您可以在将日期添加到阵列之前格式化日期。这就是我的方式。我使用了AngularJS

//将日期转换为标准格式

var dt = new Date(date);

//仅将日期和月份推送到标签数组

$rootScope.charts.mainChart.labels.push(dt.getDate() + "-" + (dt.getMonth() + 1));

在图表演示中使用此数组

Answer 4

我有一个不同的用例，我想要基于图表中数据的开始和结束时间之间的时间长短的不同格式。我发现这是最简单的方法

    xAxes = {
        type: "time",
        time: {
            displayFormats: {
                hour: "hA"
            }
        },
        display: true,
        ticks: {
            reverse: true
        },
        gridLines: {display: false}
    }
    // if more than two days between start and end of data,  set format to show date,  not hrs
    if ((parseInt(Cookies.get("epoch_max")) - parseInt(Cookies.get("epoch_min"))) > (1000*60*60*24*2)) {
        xAxes.time.displayFormats.hour = "MMM D";
    }

如何在Chart.js v2中格式化x轴时间刻度值

4 个答案: