Ось X не работает, потому что я не правильно использую момент. js - PullRequest
Новая
       14

Ось X не работает, потому что я не правильно использую момент. js

0 голосов
/ 14 января 2020

Я пытаюсь представить некоторую информацию, а мои x-axis - время. Для этой цели я использую chart.js и moment.js, но у меня возникают некоторые проблемы с преобразованием этого времени в метку.

Мой код: 

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 думаю, проблема в том, что я неправильно форматирую время, но я не знаю, как его решить. Кто-нибудь может мне помочь?

Большое спасибо!

1 Ответ

1 голос
/ 14 января 2020

Проблема находится в вашей функции formatData. Используя moment, вы правильно анализируете время, но затем format возвращаете его к исходному значению string. Решение состоит в том, чтобы больше не звонить format. 

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

И все это: 

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>
...