Question

我想在我的图表上显示每个ID的时间。我从我的mysql Db中获取值，但它总是显示值＆＃34; 0＆＃34;在我的图表上

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

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

数据：[{id：＆＃39; 3＆＃39;，wachttijd：＆＃39; 00：01：04＆＃39;}，..... 喜欢这里

graph i get

我想让它向我展示像00:01:04这样的值是否可能？

Answer 1

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

你可以转换为秒数，
请参阅以下工作代码段...

＆＃13;

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
  });
})

＆＃13;

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

＆＃13;

Morris js时间为Y值始终为零

1 个答案: