Y轴上的时间轴，带有chart.js

Question

我在图的Y轴上找不到时间刻度时遇到麻烦。

此图的目标是在不同的机器操作员之间比较制造同一件零件所需的时间（分钟和秒）。

当只想绘制一个空白图形时，只显示X轴上的运算符名称。

使用我在控制器中执行的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
}
]
}

正如您在查询中看到的[[对于由不同操作员制造的同一零件，会有不同的加工时间，这就是我要在图形上转储的时间，而我不知道如何花费时间（[ C0]）在Y轴上

在此getChartDataPiece（）函数中，我使用ajax接收我的数组片段。我也将时间表示为数组，并在其中存储我的加工时间，这就是我的运行方式：

"time": "00:02:00","time": "00:04:00",

我不确定chart.js是否可以识别那些加工时间（分钟和秒）] >>这就是我尝试使用renderChartPiece（operator，time）函数作图的方式：
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);
        }
    });
}

[我需要您的帮助

我无法在图形的Y轴上定位时间刻度。该图的目的是在不同的机器操作员之间比较所需的时间（分钟和秒）...

Answer 1

我将以秒为单位的值用于Y轴。

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