Morris js 时间作为 Y 值始终为零

Question

我想在图表上显示每个 ID 的时间。我从 mysql Db 中获取值，但它在我的图表

上始终显示值“0”

    <!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>

这是我在浏览器上查看源代码时得到的代码，因此我可以看到我正在从我的数据库中获取值

data :[{ id:'3', wachttijd :'00:01:04'}, ..... like here

graph i get

我想让它显示像 00:01:04 这样的值，这可能吗？

Answer 1

不要认为你可以使用字符串作为 y 值

你可以转换成秒数，
请参阅以下工作片段...

window.addEventListener('load', function () { 
  var yLabels = [];
  var rawData = [{ 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'}];
  var data = rawData.map(function (row) {
    yLabels.push('');
    return {
      id: row.id,
      yValue: ((new Date('01/01/2018 ' + row.wachttijd).getTime()) - (new Date('01/01/2018 00:00:00').getTime())) / 1000
    };
  });

  Morris.Line({
   element : 'chart',
   data :data,
   xkey :'id',
   parseTime: false ,
   ykeys :['yValue'],
   yLabelFormat: function (y) {
    var date = new Date(new Date('01/01/2018').getTime() + (y * 1000));
    var hour = '00' + date.getHours().toString();
    hour = hour.substr(hour.length - 2);
    var min = '00' + date.getMinutes().toString();
    min = min.substr(min.length - 2);
    var second = '00' + date.getSeconds().toString();
    second = second.substr(second.length - 2);
    return hour + ':' + min + ':' + second;
  },
   labels :yLabels,
   hideHover :'auto',
   stacked :true
  });
})

<!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>

Morris js 时间作为 Y 值始终为零

Morris js time as Y value always zero

javascript

charts

morris.js