Chart js x轴值重复两次

mnemlml8  于 2023-10-18  发布在  Chart.js
关注(0)|答案(1)|浏览(158)

我使用以下代码使用chart 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轴日期值重复了两次。x1c 0d1x
同样在我的控制台中,我收到了一条关于moment js的警告消息;
弃用警告:moment构造福尔斯又回到了js Date。这是不鼓励的,并将在即将到来的主要版本中删除。请参阅https://github.com/moment/moment/issues/1407了解更多信息。
我想是因为这行代码

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

请任何人给予给我一个解决办法,谢谢。

vfh0ocws

vfh0ocws1#

因此,chartjs动态地创建了x轴标签,并决定每天显示两个标签,格式化后最终显示两个相同的日期。
将一个新字段unit传递给time对象,并将其设置为day。这将导致图表在时间范围内每天仅显示一个刻度。(example fiddle

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

相关问题