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);

});

Codepen上的示例： 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)

关于不显示最后数据：

绘制了条形图，但它不在可见位置。可以在JSFiddle上验证这一点（不知道为什么不在codepen上），如果你将鼠标移动到屏幕的最边缘，标签就会出现。

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

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

为什么Chart.js v2基于时间的数据没有正确对齐X轴？

1 个答案: