Chart.js如何将UNIX时间戳格式化后作为坐标轴日期标签显示

问题原因 #

你现在的配置有两个核心错误：

• options配置项放错了位置，被嵌套到了data属性内部，Chart.js无法识别时间轴的相关配置
• 散点图的时间格式数据需要指定x/y对应字段，不能直接传入日期字符串键值对

解决步骤 #

1. 先借助moment.js处理原始数据，把日期字符串转成moment对象，匹配Chart.js散点图要求的{x: 时间值, y: 数值}格式：

// 你的原始数据示例
const rawData = {
  '2016-Apr': 0.6031746031746031,
  '2016-May': 0.5079365079365079,
  '2016-Oct': 0.4126984126984127,
  '2017-Apr': 0.746031746031746
}

// 处理为符合要求的格式
const processedData = Object.entries(rawData).map(([dateStr, value]) => {
  return {
    x: moment(dateStr, 'YYYY-MMM'),
    y: value
  }
})

2. 修正图表初始化的配置结构，把options移到和type、data平级的位置：

var scatterChart = new Chart(document.getElementById('chartr'), {
  type: 'scatter',
  data: {
    datasets: [{
      data: processedData
    }]
  },
  // options调整为顶层属性
  options: {
    scales: {
      xAxes: [{
        type: 'time',
        time: {
          parser: 'YYYY-MMM',
          unit: 'month',
          displayFormats: {
            'month': 'YYYY-MMM'
          }
        }
      }]
    }
  }
});

补充说明 #

不需要转换为UNIX时间戳就可以正常渲染，x轴会自动按你配置的YYYY-MMM格式显示。如果需要调整刻度间距，可以在time配置中加stepSize参数，比如设置stepSize: 2就会每2个月显示一个刻度。

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