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

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配置部分.您可以使用回调函数格式化每个tick的值.例如,我想将显示日期的区域设置更改为始终为德语.在轴选项的刻度部分

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