morris.js折线图X轴显示异常求助：需改为Day 1样式

嘿，这个问题我之前用Morris.js做图表的时候也踩过坑！

问题根源 #

你遇到的X轴显示异常，是因为Morris.js默认会把x字段的值当作日期时间来解析。当你传入'1'、'2'这类数字字符串时，它会自动将其映射到1900年1月的对应天数（Morris的默认日期基准是1900年），所以才会出现带190前缀的奇怪标签。

解决方法 #

推荐用下面第一种方案，更贴合你的数据场景：

方案1：禁用日期解析 + 自定义X轴标签

直接告诉Morris不要把x值当成日期处理，同时自定义X轴的显示格式为Day 1、Day 2...：

// 假设你原来的图表初始化代码是这样的，添加关键配置即可
Morris.Line({
  element: 'your-chart-container-id', // 替换成你的图表容器ID
  data: DataForChart1,
  ykeys: ['a'],
  labels: ['你的数据标签'], // 替换成你的实际标签文本
  // 关键配置1：禁用自动日期解析
  parseTime: false,
  // 关键配置2：自定义X轴标签格式
  xLabelFormat: function(x) {
    // x.index从0开始计数，加1得到Day 1、Day 2...
    return 'Day ' + (x.index + 1);
  }
});

方案2：强制格式化日期标签（不推荐）

如果你非要保留默认的日期解析逻辑（其实没必要，因为你的x值不是真实日期），也可以通过格式化函数提取天数：

Morris.Line({
  // 其他配置项不变
  xLabelFormat: function(x) {
    // x是解析后的日期对象，取日期部分
    var dayNum = x.getDate();
    return 'Day ' + dayNum;
  }
});

小提示 #

优先用方案1，因为你的x字段本质是天数序号，不是日期，禁用日期解析更符合数据逻辑，也能避免后续可能出现的其他日期解析问题。

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