Временная шкала на оси Y, с графиком. js - PullRequest
Новая
       9

Временная шкала на оси Y, с графиком. js

0 голосов
/ 17 апреля 2020

У меня возникают проблемы с поиском шкалы времени на оси Y моего графика .

Цель этого графика - сравнить время между различными операторами станка. (минуты и секунды), которые были необходимы для изготовления одного и того же куска.

При желании построить график только пустой график показывает мне только имена операторов на оси X.

chart-time

Используя запрос sql, который я выполняю в моем контроллере, я получаю эту информацию: 

{
"pieces": [
{
"id": 2,
"name": "Miguel",
"time": "00:02:00",
"denomination": "Eje 340 d19",
"quantity": 60,
"rol": 2
},
{
"id": 4,
"name": "Luis",
"time": "00:04:00",
"denomination": "Eje 340 d19",
"quantity": 30,
"rol": 2
}
]
}

Как вы можете видеть в запросе для одной и той же детали, изготовленной разными операторами, существует разное время обработки, именно это я и хочу вывести на график, и я не знаю, как тратить минуты ("time": "00:02:00","time": "00:04:00",) по оси Y

В этой функции getChartDataPiece () я использую ajax для получения частей моего массива. Я также указываю время в виде массива, и только там хранятся мои времена обработки, вот как я его запускаю: 

function getChartDataPiece(name) {   
    $.ajax({
        url: '/admin/dashboard/getChartPiece/' + name,  
        type: 'GET',
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          },
        dataType: 'json',
        success: function (response) {             
            console.log(response);
            var time = [];           
            var operator = [];                    

            for (var i in response.pieces) {
                time.push(response.pieces[i].time);              
                operator.push(response.pieces[i].name);                                
            }       
            renderChartPiece(operator, time);           
        },       
        error: function (response) {       
            console.log(response.time);
            console.log(response.operator);
        }
    });
}

Я не уверен, что это время обработки (минуты и секунды) распознаются по графику. js

Вот как я пытаюсь построить график с помощью функции renderChartPiece (оператор, время): 

function renderChartPiece(operator, time) {
    var ctx1 = document.getElementById("times").getContext('2d');
    var myChart1 = new Chart(ctx1, {  
        type: 'bar',    
        data: {                       
            labels: operator,
            datasets: [{
                label: 'Partida',
                data: time,
                borderColor: 'rgba(75, 192, 192, 1)',
                backgroundColor: 'rgba(75, 192, 192, 1)',
                borderWidth: 1,
                yAxisID: 'Tiempos',
                xAxisID: 'Operarios',
            }],
        },
        options: {
            scales: {
                yAxes: [{
                    id: "Tiempos",
                    ticks: {
                        beginAtZero: true                       
                    },
                    scaleLabel: {
                        display: true,
                        labelString: 'Tiempos'
                    }
                }],
                xAxes: [{
                    id: "Operarios",                   
                    scaleLabel: {
                        display: true,
                        labelString: 'Operarios'
                    }
                }],
            },
            title: {
                display: true,
                text: "Ordenes de trabajo"
            },
            legend: {
                display: true,
                position: 'bottom',
                labels: {
                  fontColor: "#17202A",                
                }
            },
        }        
    });  
}

Пожалуйста, НУЖНО ваша помощь

1 Ответ

1 голос
/ 18 апреля 2020

Я бы использовал значения в секундах для оси Y. 

function timeToSeconds(time) {
  var parts = time.split(":");
  var valueInSeconds = 0;
  var secondsInTimeUnit = [3600, 60, 1];
  for (j = 0; j < parts.length; j++) {
    valueInSeconds = valueInSeconds + secondsInTimeUnit[j] * parseInt(parts[j]);
  }
  return valueInSeconds;
}

, чем в вашем коде: 

function getChartDataPiece(name) { 
//.....
            var time = [];           
            var operator = [];                    

            for (i = 0; i <  response.pieces.length; i++) {
                time.push(timeToSeconds(response.pieces[i].time));              
                operator.push(response.pieces[i].name);                                
            }

Демо

Однако значения оси Y указаны в секундах.

Здесь и здесь несколько советов, как это изменить. Не забудьте высказать эти два;)

Вот что вам нужно изменить: 

function renderChartPiece(operator, time) {
//...
        options: {
            scales: {
                yAxes: [{
//...
                   ticks: {
                     beginAtZero:true,
                     stepSize: 30, //step every 30 seconds
                     callback: function(label, index, labels) {
                       if (parseInt(label) % 30 == 0) {
                         //convert seconds to mm:ss format
                         var mins = parseInt(parseInt(label)/60);
                         var seconds = parseInt(label) - mins*60;
                         return mins+":"+(seconds < 10 ? "0" : "") +seconds;
                       } else {
                         return "";
                       }
                     }
                   },

И вот окончательное решение

РЕДАКТИРОВАНИЕ 2020/04/18:

Значения всплывающей подсказки в предыдущем решении имели значения в секундах.

Здесь вы можете найти больше 

  //...
  options: {

        //add this for tooltips
        tooltips: {
            callbacks: {
                label: function(tooltipItem, data) {
                    var label = data.datasets[tooltipItem.datasetIndex].label || '';
                    if (label) {
                        label += ': ';
                    }
                  var mins = parseInt(parseInt(tooltipItem.yLabel)/60);
                  var seconds = parseInt(tooltipItem.yLabel) - mins*60;
                  mins =  mins+":"+(seconds < 10 ? "0" : "") +seconds;                  
                  return label + mins;
                }
            }
        },
        scales: {
        //....

Исправленная версия здесь

...