Javascript：在Chart.js中显示就寝时间

Question

I want to show the bedtimes in a graph from Chart.js . Assume I have a array:

bedtimes = [2200, 2345, 2130, 2445, 2115, 2600]
//#1 = 22:00
//#2 = 23:45
//#3 = 21:30
//#4 = 00:45
//#5 = 21:15
//#6 = 02:00

When I have a value of 2230 , the graph dot, is not on the half between 22:00 and 23:00 but is on a quarter, because the graphs thinks that there are 100 units between 23:00 and 24:00 but there are actually 60 (60 minutes in 1 hour)

var myPie = new Chart(document.getElementById("myChart").getContext("2d")).Line(data, {
    scaleOverride: true,
    scaleSteps: 4,
    scaleStepWidth: 100,
    scaleStartValue: 2200,
    scaleLabel: function (valuePayload) {
        if(Number(valuePayload.value)===2200)    
            return '22:00';
        if(Number(valuePayload.value)===2300)    
            return '23:00';
        if(Number(valuePayload.value)===2400)    
            return '00:00';
        if(Number(valuePayload.value)===2500)    
            return '01:00';
        if(Number(valuePayload.value)===2600)    
            return '02:00';
    }
});

Can someone explain me how to setup the graph, that after 2359 comes 2400 , And when the value is 2230 the graph dot is at the half between 22:00 and 23:00

Answer 1

When you convert your integer representation of time to "minutes since midnight", then 2230 lies right in the middle of 2200 and 2300.

var getMinutesSinceMidnight = function(time){
    var hours = Math.floor(time/100);
    var minutes = time%100;    
    return hours*60 + minutes;
}

getMinutesSinceMidnight(2200) //returns 1320 
getMinutesSinceMidnight(2230) //returns 1350 
getMinutesSinceMidnight(2300) //returns 1380

You can use these values for plotting and the original integer times for labeling of the graph.

Answer 2

For the hour, divide by 100:

var time = 2330;
var hour = Math.floor(time / 100);

Now subtract the result from the original time and multiply it by the proper fraction (100/60)

time -= (hour * 100)
var minute = (time * 100) / 60

jsfiddle:

 window.getTime = function() { var time = document.getElementById('time').value; var hour = Math.floor(time / 100); time -= (hour * 100); var minute = (time * 100) / 60; alert("Hour: " + hour + ", Minute: " + minute); } 

 <input type="number" id="time"> <button type="button" onclick="getTime()">Get Time</button> 

This will turn 2330 into 2350, that way the dot appears half-way as expected.