x-Axis not working because I'm not using correctly moment.js

问题

I'm trying to plot some info, and my x-axis are time. For this objective I'm using, chart.js and moment.js but I'm having some problems to convert this time to a label.

My code is:

var sData = {
    datasets: [{
        label: 'Dataset1',
        data: [{ x: '09:00', y: 88 }, { x: '09:10', y: 89 }, { x: '09:13', y: 86 }, { x: '09:23', y: 86 },
            { x: '09:26', y: 85}, { x: '09:29', y: 83 }]
        }, {
        label: 'Dataset2',
        data: [{ x: '09:02', y: 88 }, { x: '09:13', y: 89 }, { x: '09:14', y: 86 }, { x: '09:20', y: 86 },
            { x: '09:24', y: 85 }, { x: '09:29', y: 83 }]
    }]
}

sData.datasets[0].data = formatData(sData.datasets[0].data)
sData.datasets[1].data = formatData(sData.datasets[1].data)

function formatData(oldData) {
    var newData = []
    for (var i = 0; i < oldData.length; i++) {
        var currentData = {}
        currentData.x = moment(oldData[i].x, "HH:mm").format('HH:mm')
        currentData.y = oldData[i].y
        newData.push(currentData)
    }
    return newData
  }

var data = sData

var options = {
    responsive: true,
    scales: {
        xAxes: [{
            type: 'time',
        }]
    },
    tooltips: {
        callbacks: {
            title: function(tooltipItem, data){
                return moment(tooltipItem[0].label).format('HH:mm')
            }
        }
    }
}

var ctx = document.getElementById('bateria_graf');
let chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: options
});

I think the problem is that I'm not formatting correctly the time, but I don't know how to solve it. Can somebody help me?

Thank you very much!

回答1:

The problem is located in your formatData function. Using moment, you correctly parse the time but then you format it back to its original string value. The solution is to no longer call format.

currentData.x = moment(oldData[i].x, "HH:mm");

And the whole thing:

var sData = {
    datasets: [{
        label: 'Dataset1',
        data: [{ x: '09:00', y: 88 }, { x: '09:10', y: 89 }, { x: '09:13', y: 86 }, { x: '09:23', y: 86 },
            { x: '09:26', y: 85}, { x: '09:29', y: 83 }]
        }, {
        label: 'Dataset2',
        data: [{ x: '09:02', y: 88 }, { x: '09:13', y: 89 }, { x: '09:14', y: 86 }, { x: '09:20', y: 86 },
            { x: '09:24', y: 85 }, { x: '09:29', y: 83 }]
    }]
}

sData.datasets[0].data = formatData(sData.datasets[0].data)
sData.datasets[1].data = formatData(sData.datasets[1].data)

function formatData(oldData) {
    var newData = []
    for (var i = 0; i < oldData.length; i++) {
        var currentData = {}
        currentData.x = moment(oldData[i].x, "HH:mm")
        currentData.y = oldData[i].y
        newData.push(currentData)
    }
    return newData
}

var options = {
    responsive: true,
    scales: {
        xAxes: [{
            type: 'time',
        }]
    },
    tooltips: {
        callbacks: {
            title: (tooltipItem, data) => moment(tooltipItem[0].label).format('HH:mm')            
        }
    }
}

var ctx = document.getElementById('bateria_graf').getContext('2d');
let chart = new Chart(ctx, {
    type: 'line',
    data: sData,
    options: options
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.1.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="bateria_graf"></canvas>

来源：https://stackoverflow.com/questions/59725625/x-axis-not-working-because-im-not-using-correctly-moment-js

标签

javascript

chart.js

momentjs