为什么Chart.jsv2基于时间的数据不能与X轴正确对齐？

Question

当使用Chart.js显示基于时间的数据时，数据本身似乎与X轴标签不对齐。例如，当数据是2016-11-30时，条形图实际上显示在12月。一系列日期中的最后一个日期甚至没有显示在图表上。如何使它们正确对齐？

$(document).ready(function(){

    var config = {
        type: 'bar',
        data: {
            labels: [
        '2016-11-30', // Why showing in December?
        '2017-04-01', // Why not showing in beginning of April?
        '2017-06-30'], // Why not showing?
            datasets: [{
                label: 'Contacts',
                backgroundColor: 'red',
                data: [
          1,
          5,
          7
        ]
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero:true,
                        stepSize:1
                    }
                }],
                xAxes: [{
                    type: 'time',
                    barThickness:2,
                    time: {
                        unit: 'month'
                    }
                }]
            }
        }
    };

    var Canvas = $("#Chart");
    var cc = new Chart(Canvas, config);

});

代码笔示例：https://codepen.io/skunkbad/pen/EmBJMa

Answer 1

关于在错误的日期显示：

这是因为你如何实例化一个日期对象，以及它与时区的关系，你的浏览器可能会将它解析到你的时区，你会得到一个不同的值。

我在GMT-3上，这就是发生在我身上的情况，例如：

$ new Date('2016-11-30')
- Tue Nov 29 2016 21:00:00 GMT-0300 (BRT)

$ new Date(2016, 11, 30)
- Fri Dec 30 2016 00:00:00 GMT-0300 (BRT)

关于不显示最新数据:

条形图已打印，但不在可见位置。可以在JSIDLE上验证这一点（不确定为什么不在codepen上），如果您将鼠标移动到屏幕的边缘，标签将出现。

这是一个已知问题，正在此处跟踪:#2415

如果可能，我认为最简单的解决方法是在您的时间尺度上手动定义max属性