原生JS环境下Chart.js日期格式化失败，显示INVALID DATE问题解决

我尝试在Chart.js图表的X轴上展示格式为“YYYY-MM-DD HH:mm”的日期时间，编写了如下代码：

const formatDate = "YYYY-MM-DD HH:mm";

mikeFWLabelChart = moment(mikeFWLabelChart).format(formatDate);

const a = new Chart(canvasElement, {
   data: {
     labels: mikeFWLabelChart,
     datasets: [{
       type: 'line',
       label: 'Метра',
       data: mikeFWDataChart,
       borderWidth: 1
     }]
   },
   options: {
     scales: {
       xAxes: [{
         type:       "time",
         time:       {
             format: formatDate,
             tooltipFormat: 'll'
         },
         scaleLabel: {
             display:     true,
             labelString: 'Date'
         }
     }],
     yAxes: [{
         scaleLabel: {
             display:     true,
             labelString: 'value'
         }
     }]
     }
   }
 })
};

但X轴出现“INVALID DATE”错误。我也曾移除moment.js的格式化代码，仅通过options中的format配置设置日期格式，但日期仍显示为“2023-02-16T05:00:00.000Z”格式。请问如何将日期格式修改为YYYY-MM-DD HH:mm？

核心问题 #

1. 提前用moment把日期转成格式化字符串后，Chart.js的time类型轴无法识别这些纯文本为可解析的日期，导致"INVALID DATE"错误。
2. 直接用ISO日期字符串时格式未生效，是因为v2版本的Chart.js时间轴需要正确配置displayFormats而非单一的format项。

修正步骤 #

• 保留原始日期输入：删除mikeFWLabelChart = moment(mikeFWLabelChart).format(formatDate);这行代码，让labels使用原始的Date对象或ISO格式字符串数组——Chart.js的时间轴需要能解析的日期源，而非格式化后的文本。
• 调整时间轴配置：针对Chart.js v2版本（你的代码使用xAxes，属于v2），修改time配置项，使用displayFormats指定对应时间粒度的显示格式：

  time: {
    // 若原始日期是自定义格式字符串而非ISO，需添加parser：parser: formatDate
    unit: 'minute', // 匹配你的数据时间粒度，比如minute、hour
    displayFormats: {
      minute: 'YYYY-MM-DD HH:mm', // 分钟粒度下的显示格式
      hour: 'YYYY-MM-DD HH:mm'    // 缩放切换到小时粒度时的格式
    },
    tooltipFormat: 'YYYY-MM-DD HH:mm'
  }
  

• 依赖检查：确保项目中已引入moment.js，因为Chart.js v2的时间轴功能依赖moment来解析和格式化日期。

完整修正代码 #

const formatDate = "YYYY-MM-DD HH:mm";

// 移除提前格式化的代码，保留原始日期数据
// mikeFWLabelChart = moment(mikeFWLabelChart).format(formatDate);

const a = new Chart(canvasElement, {
  data: {
    labels: mikeFWLabelChart,
    datasets: [{
      type: 'line',
      label: 'Метра',
      data: mikeFWDataChart,
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      xAxes: [{
        type: "time",
        time: {
          unit: 'minute',
          displayFormats: {
            minute: formatDate,
            hour: formatDate
          },
          tooltipFormat: formatDate
        },
        scaleLabel: {
          display: true,
          labelString: 'Date'
        }
      }],
      yAxes: [{
        scaleLabel: {
          display: true,
          labelString: 'value'
        }
      }]
    }
  }
});

内容的提问来源于stack exchange，提问作者Ben Johnson