iPad端Safari/Chrome浏览器中Highcharts X轴日期显示异常问题

我之前也碰到过类似的跨端日期解析坑，结合你的代码和场景来看，大概率是日期解析的locale兼容性或者移动端浏览器的日期处理差异在搞鬼，给你几个具体的排查和修复方向：

1. 检查moment.js的Locale加载与匹配 #

你代码里指定了'br'（巴西葡萄牙语）locale，但iPad端浏览器可能存在这两个问题：

• 没正确引入moment的pt-br locale文件，导致解析时识别不了葡萄牙语的日期缩写
• SharePoint返回的日期其实是英文格式（比如"Wed Oct 11 2023 00:00:00"），用'br'locale解析直接失败，isValid()返回false，最终MonthYear根本没被赋值

修复方案：

• 先确保已引入pt-br locale：

  // 模块化项目写法
  import 'moment/locale/pt-br';
  // CDN引入写法
  <script src="https://cdn.jsdelivr.net/npm/moment@2.29.4/locale/pt-br.js"></script>
  

• 如果SharePoint返回的是英文日期格式，改用'en'locale解析，再转成目标格式：

  for (i = 0; i < customerSortedData.length; i++) {
      const dateStr = customerSortedData[i].Date;
      // 用英文locale解析英文格式的日期
      const parsedDate = moment(dateStr, "ddd MMM DD YYYY HH:mm:ss", 'en', true);
      if (parsedDate.isValid()) {
          // 可以指定locale输出葡萄牙语的月份缩写
          customerSortedData[i].MonthYear = parsedDate.locale('pt-br').format('MMM YYYY');
      }
  }
  

2. 强制使用UTC避免时区/区域干扰 #

移动端浏览器的系统时区或区域设置可能和桌面端不一样，导致moment解析时出现偏差。试试强制用UTC解析和格式化：

for (i = 0; i < customerSortedData.length; i++) {
    const parsedDate = moment.utc(customerSortedData[i].Date, "ddd MMM DD YYYY HH:mm:ss", true);
    if (parsedDate.isValid()) {
        customerSortedData[i].MonthYear = parsedDate.format('MMM YYYY');
    }
}

3. 让Highcharts直接处理日期格式化 #

有时候哪怕你提前处理了MonthYear，Highcharts还是会尝试解析原始日期字段导致显示异常。可以直接在Highcharts的x轴配置里指定格式化逻辑：

Highcharts.chart('container', {
    xAxis: {
        type: 'datetime',
        labels: {
            formatter: function() {
                // 直接对原始日期进行格式化
                return moment(this.value).format('MMM YYYY');
            }
        }
    },
    // 其他配置...
});

如果你的MonthYear已经是字符串类型，也可以把x轴设为category类型，避免Highcharts自动解析日期：

xAxis: {
    type: 'category'
}

4. 验证解析结果是否有效 #

在iPad浏览器的开发者工具里加个日志，确认moment是不是真的解析成功了：

for (i = 0; i < customerSortedData.length; i++) {
    const dateStr = customerSortedData[i].Date;
    const parsedDate = moment(dateStr, "ddd MMM DD YYYY HH:mm:ss", 'br', true);
    console.log(`原始日期: ${dateStr}, 解析结果: ${parsedDate.isValid() ? parsedDate.format() : '无效日期'}`);
    if (parsedDate.isValid()) {
        customerSortedData[i].MonthYear = parsedDate.format('MMM YYYY');
    }
}

如果日志里大量出现“无效日期”，那核心问题就是解析格式和locale不匹配，调整一下就好。

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