Morris.js图表Y轴始终显示0，如何展示时分秒格式时间值？

我尝试用Morris.js折线图展示每个id对应的时间值，数据来自MySQL数据库，但图表Y轴始终显示0。浏览器源码显示已经获取到了正确的数据：

data :[{ id:'3', wachttijd :'00:01:04'}, { id:'4', wachttijd :'00:00:53'}, ...]

我的完整代码如下：

<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css"> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script> 
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script> 
</head> 
<body> 
<br /><br /> 
<div class="container" style="width:900px;"> 
<h2 align="center">Morris.js chart with PHP & Mysql</h2> 
<h3 align="center">wachttijd</h3> 
<br /><br /> 
<div id="chart"></div> 
</div> 
</body> 
</html> 
<script> 
Morris.Line({ 
element : 'chart', 
data :[{ id:'3', wachttijd :'00:01:04'}, { id:'4', wachttijd :'00:00:53'}, { id:'5', wachttijd :'00:01:09'}, { id:'6', wachttijd :'00:00:53'}, { id:'7', wachttijd :'00:01:09'}, { id:'8', wachttijd :'00:00:12'}], 
xkey :'id', 
parseTime: false , 
ykeys :['wachttijd'/*,'totaaltijd'*/], 
labels :['wachttijd'/*,'totaaltijd'*/], 
hideHover :'auto', 
stacked :true 
}); 
</script>

现在图表Y轴全是0，请问能不能让图表直接展示像00:01:04这样的时分秒格式值？

咱们先搞明白问题根源：Morris.js的折线图对Y轴数据有硬性要求，必须是数值类型（比如整数、浮点数），但你现在传入的wachttijd是字符串格式的时分秒，Morris根本识别不了这是有效数值，所以就默认显示0了。

要实现展示时分秒的效果，咱们得做两步转换：先把时分秒转成数值（比如总秒数）让图表能识别，再把数值转回到时分秒格式给用户看。

直接看修改后的代码：

// 工具函数：把时分秒字符串转成总秒数
function timeToSeconds(timeStr) {
  const [hours, minutes, seconds] = timeStr.split(':').map(Number);
  return hours * 3600 + minutes * 60 + seconds;
}

// 工具函数：把总秒数转回时分秒格式
function secondsToTime(seconds) {
  const hours = Math.floor(seconds / 3600).toString().padStart(2, '0');
  const minutes = Math.floor((seconds % 3600) / 60).toString().padStart(2, '0');
  const secs = (seconds % 60).toString().padStart(2, '0');
  return `${hours}:${minutes}:${secs}`;
}

// 处理原始数据，新增一个存储总秒数的字段
const processedData = [{ id:'3', wachttijd :'00:01:04'}, { id:'4', wachttijd :'00:00:53'}, { id:'5', wachttijd :'00:01:09'}, { id:'6', wachttijd :'00:00:53'}, { id:'7', wachttijd :'00:01:09'}, { id:'8', wachttijd :'00:00:12'}].map(item => ({
  ...item,
  wachttijdSec: timeToSeconds(item.wachttijd)
}));

Morris.Line({
  element : 'chart',
  data : processedData,
  xkey :'id',
  parseTime: false,
  ykeys :['wachttijdSec'], // 用转换后的秒数字段作为Y轴数据源
  labels :['wachttijd'],
  hideHover :'auto',
  stacked :true,
  // 自定义Y轴刻度的显示格式，把秒数转回时分秒
  yLabelFormat: function(y) {
    return secondsToTime(y);
  },
  // 自定义鼠标hover时的显示内容，直接用原始的时分秒字符串
  hoverCallback: function(index, options, content) {
    const item = options.data[index];
    return `<div class="morris-hover-row-label">ID: ${item.id}</div><div class="morris-hover-point">wachttijd: ${item.wachttijd}</div>`;
  }
});

关键说明 #

1. 数据转换：新增wachttijdSec字段存储总秒数，这是Morris能识别的数值类型，图表就能正确计算Y轴刻度了
2. Y轴格式化：通过yLabelFormat把Y轴显示的秒数转换成用户熟悉的时分秒格式
3. hover优化：用hoverCallback自定义悬浮提示内容，直接展示原始的时分秒字符串，用户看起来更直观

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