Highcharts.js x轴日期显示异常：如何设置正确日期格式？

嗨，我来帮你搞定这个问题！Highcharts的datetime类型轴对x值的格式有严格要求——必须是毫秒级的时间戳（数字类型），而不是字符串格式的日期，这就是你之前显示异常的核心原因。

为什么你的设置没生效？ #

你用["2017-1-22",262]这种字符串日期作为x值时，Highcharts无法自动将其解析为正确的时间戳；如果尝试了时间戳但还是不行，大概率是用了秒级时间戳而不是毫秒级，Highcharts只认毫秒数哦。

正确的处理方式 #

1. 转换日期为毫秒级时间戳
   把你的字符串日期转换成JavaScript的Date对象，再通过getTime()方法获取毫秒时间戳，替换掉原来的字符串日期：

   // 原数据
   // data: [["2017-1-22", 262], ["2017-1-23", 310], ["2017-1-24", 280]]
   // 修改后的数据
   data: [
     [new Date("2017-1-22").getTime(), 262],
     [new Date("2017-1-23").getTime(), 310],
     [new Date("2017-1-24").getTime(), 280]
   ]
   

   如果你手里是Unix秒级时间戳，记得乘以1000转成毫秒：timestamp * 1000。

2. 优化x轴日期显示（可选）
   保持xAxis.type: 'datetime'的同时，可以配置dateTimeLabelFormats来自定义x轴标签的显示格式，避免默认格式不符合需求：

   xAxis: {
     type: 'datetime',
     dateTimeLabelFormats: {
       day: '%Y-%m-%d', // 按天显示的格式，比如2017-01-22
       month: '%Y-%m',
       year: '%Y'
     },
     labels: {
       rotation: 45, // 旋转标签防止重叠
       align: 'right'
     }
   }
   

这样修改后，x轴的日期就能正常显示，鼠标悬停的提示也会保持正确的日期格式啦。

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