Morris.js折线图日期与自定义时间格式配置咨询

没问题，这两个需求都能轻松实现，我给你拆解成两步来解决：

一、把日期显示从YYYY-mm-dd改成dd/mm/YYYY #

Morris.js 自带的xLabelFormat配置项就是用来自定义X轴日期格式的，搭配parseTime参数就能搞定，这里分两种场景适配：

场景1：日期是标准格式（时间戳或YYYY-mm-dd字符串） #

如果你的y字段是Morris.js能自动识别的日期（比如2014-05-20这种标准格式），直接开启parseTime: true，然后在xLabelFormat里格式化输出：

Morris.Line({
  element: 'your-chart-id', // 替换成你的图表容器ID
  data: yourData,
  xkey: 'y', // 指定用y字段作为x轴日期
  ykeys: ['a'], // 指定要展示的数值字段
  labels: ['耗时'], // y轴显示的标签
  parseTime: true,
  xLabelFormat: function(x) {
    // x是自动解析后的Date对象，提取日、月、年并转成dd/mm/YYYY
    const day = x.getDate().toString().padStart(2, '0');
    const month = (x.getMonth() + 1).toString().padStart(2, '0'); // 注意月份是从0开始的，要加1
    const year = x.getFullYear();
    return `${day}/${month}/${year}`;
  }
});

场景2：日期是自定义字符串（比如你示例里的20-05-2014） #

如果原始日期是dd-mm-YYYY这类非标准格式，先关闭自动时间解析（parseTime: false），手动拆分字符串后拼接成目标格式：

Morris.Line({
  element: 'your-chart-id',
  data: yourData,
  xkey: 'y',
  ykeys: ['a'],
  labels: ['耗时'],
  parseTime: false, // 关闭自动解析，避免Morris.js识别出错
  xLabelFormat: function(x) {
    // 直接拆分原始字符串，按dd/mm/YYYY拼接
    const [day, month, year] = x.label.split('-');
    return `${day}/${month}/${year}`;
  }
});

二、让01.00.45这类分钟.秒.毫秒格式的时间正常显示 #

Morris.js只认数值类型的y轴数据，而01.00.45是字符串，肯定识别不了。我们要先把它转换成数值（比如总毫秒数），再在显示时转回到原格式：

第一步：预处理数据，把时间字符串转成数值 #

先遍历你的原始数据，把每个a字段的时间字符串转换成总毫秒数（这样Morris.js就能正常读取了）：

// 你的原始数据
var rawData = [ 
  { y: '20-05-2014', a: '01.00.45'}, 
  { y: '17-06-2015', a: '00.56.20'} 
];

// 预处理：把时间字符串转成总毫秒数
var processedData = rawData.map(item => {
  // 拆分分钟、秒、毫秒，转成数字
  const [minutes, seconds, milliseconds] = item.a.split('.').map(Number);
  // 计算总毫秒数
  const totalMs = minutes * 60 * 1000 + seconds * 1000 + milliseconds;
  return {
    y: item.y,
    a: totalMs
  };
});

第二步：配置y轴标签，把数值转回原格式 #

在图表配置里加个yLabelFormat，把总毫秒数重新转成分钟.秒.毫秒的格式：

Morris.Line({
  element: 'your-chart-id',
  data: processedData, // 用预处理后的数值数据
  xkey: 'y',
  ykeys: ['a'],
  labels: ['耗时'],
  // 这里加上前面的日期格式化配置，比如parseTime和xLabelFormat
  parseTime: false,
  xLabelFormat: function(x) {
    const [day, month, year] = x.label.split('-');
    return `${day}/${month}/${year}`;
  },
  yLabelFormat: function(y) {
    // 把总毫秒数转回目标格式
    const totalMs = y;
    const minutes = Math.floor(totalMs / (60 * 1000));
    const remainingMs = totalMs % (60 * 1000);
    const seconds = Math.floor(remainingMs / 1000);
    const milliseconds = remainingMs % 1000;
    
    // 补零确保格式统一（比如1分钟变成01，5秒变成05）
    const formattedMin = minutes.toString().padStart(2, '0');
    const formattedSec = seconds.toString().padStart(2, '0');
    const formattedMs = milliseconds.toString().padStart(3, '0');
    
    return `${formattedMin}.${formattedSec}.${formattedMs}`;
  }
});

这样配置完，图表就能正确识别你的时间数据，同时日期和时间都能按你想要的格式完美显示啦！

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