Изменены значения времени ChartJS Unix - PullRequest
0 голосов
/ 12 июня 2018

Я импортирую данные из базы данных Sybase в ChartJS в VueJs2.Я использую модуль vue-chart

Я помещаю метки времени в массив как Unix, используя

this.firstIn(new Date(tnaDetails[0].Sunday_FirstIn).getTime())

Итак: [Sunday_FirstIn: 2010-01-17 08: 00: 00.0]

Преобразуется в

1263708000000

, который затем добавляется в набор данных:

                    datasets: [{
                        type: 'line',
                        label: "First In",
                        backgroundColor: "green",
                        data: this.firstIn,
                        fill: false
                    }
                ]

Однако, когда данные отображаются на графике, значения изменены.Указанная выше метка времени единицы становится

1263700000000

, что, очевидно, возвращает неправильное время.Я ничего не делаю с галочками в опциях.

Ниже приведен результат изменения чисел.Консоль имеет исходные данные:

Numbers getting changed when imported in to ChartJS

Есть ли параметр, который изменяет точность / значения чисел в ChartJS, о которых я не знаю?

Спасибо.Сет

1 Ответ

0 голосов
/ 12 июня 2018

Для тех, у кого есть подобные проблемы в будущем, я собрал несколько найденных решений.

Во-первых, отсюда Метка времени Unix в JavaScript , я написал метод:

            getTimeString: function(dateString) {
            var hours = new Date(dateString).getHours();
            var mins = new Date(dateString).getMinutes();
            return Math.round((new Date("1970-02-01 " + hours + ":" + mins)).getTime());
        }

Важная часть здесь - убедиться, что у вас тот же день.Если этого не сделать, график ChartJS будет отображать время в разных местах на оси Y, даже если часы одинаковы.

Тогда из этот вопрос StackOverFlow и связанный с ним плункерВ опциях графика у меня есть:

{
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    yAxes: [{
                        position: 'left',
                        ticks: {
                            callback: value => {
                                let date = moment(value);
                                if (date.diff(moment('1970-02-01 23:59:59'), 'minutes') === 0) {
                                    return null;
                                }
                                return date.format('H:mm');
                            },
                            stepSize: 3.6e+6
                        }
                    }]
                }, //end scales
                tooltips: {
                    callbacks: {
                        label: function(toolTipItem, data) {
                            let date = moment(toolTipItem.yLabel);
                            if (date.diff(moment('1970-02-01 23:59:59'), 'minutes') === 0) {
                                return null;
                            }
                            return date.format('H:mm');
                        }
                    }
                }
            }

Обратите внимание на обратные вызовы.Они будут форматировать время, вычисляя разницу от установленного времени до времени, которое вам нужно построить.В первой функции вы можете использовать любой день, это не имеет значения, если это один и тот же день.StepSize будет отображать почасовые интервалы по оси Y.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...