vuejs2 - ChartJS Unix 时间值已更改

问题描述

我正在将 Sybase 数据库中的数据导入 VueJs2 中的 ChartJS。我正在使用 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

这显然返回了错误的时间。我没有对选项中的刻度做任何事情。

以下是更改数字的结果。控制台有原始数据：

是否有一个设置会改变我不知道的 ChartJS 中数字的精度/值？

谢谢。赛斯

标签： vuejs2chart.js

对于将来遇到任何类似问题的任何人，我将找到的一些解决方案拼凑在一起。

首先，从这里Unix Timestamp in 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 问题和相关的 plunker 中，在图表选项中，我有：

{
                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 将在 yAxis 上显示每小时间隔。

vuejs2 - ChartJS Unix 时间值已更改

问题描述

解决方案

推荐阅读