javascript - Chart js x轴值重复两次

Question

我正在使用以下代码使用图表 js 插件生成折线图，其中我遇到了 x 轴值重复两次的问题。

function newDate(days) {
    return moment().add(days, 'd').format('MM/DD');
}

var painChartContext = document.getElementById('pain_chart');
    var painChart = new Chart(painChartContext, {
        type: 'line',
        data: {
            labels: [newDate(-7), newDate(-6), newDate(-5), newDate(-4), newDate(-3), newDate(-2), newDate(-1)],
            datasets: [{
                label: "Pain",
                data: [8, 9, 7, 3, 10, 3, 4],
                fill: false,
                borderColor: '#b71705',
                spanGaps: true
            }]
        },
        options: {
            scales: {
                xAxes: [{
                    type: 'time',
                    time: {
                        displayFormats: {
                            'millisecond': 'MM/DD',
                            'second': 'MM/DD',
                            'minute': 'MM/DD',
                            'hour': 'MM/DD',
                            'day': 'MM/DD',
                            'week': 'MM/DD',
                            'month': 'MM/DD',
                            'quarter': 'MM/DD',
                            'year': 'MM/DD',
                        },
                        min: '04/13',
                        max: '04/19'
                    }                 
                }],
            },
        }
    });

正如我上面提到的，这给了我下面的图表，其中 x 轴日期值重复两次。

同样在我的控制台中，我收到了关于 moment js 的警告消息；

Deprecation warning: moment construction falls back to js Date. This is discouraged and will be removed in upcoming major release. Please refer to https://github.com/moment/moment/issues/1407 for more info.

我认为是因为这行代码；

function newDate(days) {
    return moment().add(days, 'd').format('MM/DD');
}

请任何人给我一个解决方案，谢谢。

Answer 1

因此 chartjs 正在动态创建 x 轴标签，并决定它每天可以显示两个标签，格式化后最终显示两个相同的日期。

将新字段unit 传递给time 对象并将其设置为day。这将导致图表在时间范围内每天只显示一个刻度。 ( example fiddle )

options: {
        scales: {
            xAxes: [{
                type: 'time',
                time: {
                     unit: 'day',
                }                 
            }],
        },
    }