Chartjs 时间轴绘图的x轴显示1970年。

Question

我正在尝试绘制一系列测量数据（按时间戳索引）。当我尝试绘制示例日期时，x轴范围从1970年到2018年，尽管数据仅存在于2018-12。

哪个设置可以正确地缩放x轴？

document.addEventListener("DOMContentLoaded", function(event) {
    var ctx = document.getElementById("plot").getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: ["Value"],
            datasets: [{
                'label': 'Value',
                'data': [
                    {t: '2018-12-01T12:00:00', y: 100},
                    {t: '2018-12-02T12:00:00', y: 90},
                    {t: '2018-12-03T12:00:00', y: 85},
                    {t: '2018-12-04T12:00:00', y: 86},
                    {t: '2018-12-05T12:00:00', y: 77},
                    {t: '2018-12-06T12:00:00', y: 73},
                    {t: '2018-12-07T12:00:00', y: 72},
                    {t: '2018-12-08T12:00:00', y: 70},
                    {t: '2018-12-15T12:00:00', y: 71},
                    {t: '2018-12-16T12:00:00', y: 72},
                    {t: '2018-12-17T12:00:00', y: 69},
                    ],
                'fill': false,
            }],
        },
        options: {
            responsive: true,
            title: {
                display: true,
                text: 'foobar',
            },
            scales: {
                xAxes: [{
                    type: 'time',
                    display: true,
                    time: {
                        parser: "YYYY-MM-DDTHH:mm:ss",
                    },
                }]
            },
        },
    });
});

- DangerRanger

Answer 1

type: 'time',
display: true,
time: {
    parser: "YYYY-MM-DDTHH:mm:ss",
},

根据ChartJS，您可以添加比例尺 > xAxes > time。同时，您还可以使用MomentJS添加时间格式。

type: 'time',
display: true,
distribution: 'series',
time: {
    unit:"year",
    displayFormats:{year:'YYYY'},
    min:'1970' ,
    max:'2018',
}

- Abdullah Ockba

---

选项“distribution: 'series'”无法使用，因为我的测量值间距不规则。当使用此选项时，数据的缩放似乎更好，但是测量值之间的间距不一致。遗憾的是，这不是解决方案。 - DangerRanger

你可以更改 distribution: 'linear' 或者将完整的代码示例添加到 CodePen 或类似网站，以帮助我找到正确的解决方案。 - Abdullah Ockba

我使用了与您提到的相同属性的 options.scales.xAxes.time，并且在 chartjs 2.9.3 上运行良好。 - Morteza

Answer 2

我不知道这是否能帮到你，但当我尝试添加一个日期“2017/02/29”时，由于2017年2月只有28天，x轴也会回到1970年。

- user11672711