Chart.js时间数据格式咨询及x轴1970原点故障排查

嘿，你遇到的x轴从1970年1月1日开始的问题，确实是日期数据格式不正确导致的！你代码里写的15-04-2018其实是一个减法表达式（15减4减2018），结果是个负数，Chart.js会把它当作Unix时间戳（毫秒数）解析，这不就对应到1970年之前的时间了嘛，所以图表才会从1970年开始显示。

一、Chart.js 认哪些时间格式？ #

Chart.js的时间轴（type: 'time'）支持这几种靠谱的格式：

• 符合ISO 8601标准的字符串，比如 '2018-04-15'（首推，不用额外配置就能识别）
• JavaScript原生的Date对象实例，比如 new Date('2018-04-15')
• 合法的Unix时间戳（毫秒数），比如 1523769600000（对应2018-04-15的时间）

二、你的代码怎么改？ #

给你两种简单的修复方式，选哪种都行：

方式1：用ISO格式字符串（最省心） #

把日期改成'YYYY-MM-DD'格式的字符串，直接替换掉原来的写法就行：

var chart = new Chart(document.getElementById('myChart'), {
  type: 'line',
  data: {
    datasets: [{
      data: [
        {x: '2018-04-15', y: 10},
        {x: '2018-04-16', y: 20},
        {x: '2018-04-17', y: 30}
      ],
      borderColor: '#3e95cd',
      fill: false
    }]
  },
  options: {
    scales: {
      xAxes: [{
        type: 'time',
        unit: 'day',
        distribution: 'linear',
        ticks: { source: 'data' },
        time: {
          // 这里可以自定义日期显示样式，比如改成你想要的DD-MM-YYYY格式
          displayFormats: {
            day: 'DD-MM-YYYY'
          }
        }
      }]
    }
  }
});

方式2：用JavaScript Date对象 #

如果你的日期不是直接写死的字符串，也可以创建Date对象来传值，注意月份是从0开始的（4月对应3）：

data: [
  {x: new Date(2018, 3, 15), y: 10},
  {x: new Date(2018, 3, 16), y: 20},
  {x: new Date(2018, 3, 17), y: 30}
]

三、额外小提示 #

要是你必须用DD-MM-YYYY这种非ISO格式的日期字符串，那得引入moment.js作为时间适配器，Chart.js才能正确解析。不过能不用额外依赖就尽量不用，优先用ISO格式最稳妥~

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