Время Морриса JS как значение Y всегда ноль - PullRequest
Новая
       19

Время Морриса JS как значение Y всегда ноль

0 голосов
/ 17 мая 2018

Я пытаюсь показать время на идентификатор на моем графике.Я получаю значения из моего 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>

это код, который я получаю, когда я просматриваю исходные коды в браузере, чтобы я мог видеть, что я получаю значенияиз моей базы данных

данные: [{id: '3', wachttijd: '00: 01: 04 '}, ..... как здесь

график, я получаю

я хочу, чтобы он показывал мне значения вроде 00:01:04 это возможно?

1 Ответ

0 голосов
/ 18 мая 2018

не думаю, что вы можете использовать строки для значений 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>
...