图表 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 的警告消息；

弃用警告：时刻构建回落到 js Date。这是不鼓励的，并将在即将发布的主要版本中删除。请参阅https://github.com/moment/moment/issues/1407了解更多信息。

我认为是因为这行代码；

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

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

Answer 1

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

将新字段

unit

传递给

time

对象并将其设置为

day

。这将导致图表在时间范围内每天仅显示一个刻度。 （示例小提琴）

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