Chart.js X轴月份标签居中及七月标签缺失问题求助

问题分析 #

1. Jul标签缺失：数据起始于7月1日，Chart.js默认未在起始边界生成对应月份标签
2. 标签未居中：默认刻度对齐月份起始点，需调整偏移与对齐规则让标签居中在月份分段中间

修改后的配置代码 #

const data = await getDataFromS3();

// 处理起始日期，提前1天确保Jul标签生成
const firstDate = new Date(data.labels[0]);
firstDate.setDate(firstDate.getDate() - 1);

const config = {
    type: 'line',
    options: {
        animation: true,
        responsive: true,
        scales: {
            x: {
                type: 'time',
                offset: true, // 开启偏移，避免边界标签截断，辅助居中
                min: firstDate, // 手动设置最小日期，触发Jul标签生成
                ticks: {
                    align: 'center' // 强制标签居中对齐刻度
                },
                time: {
                    unit: 'month',
                    round: 'month', // 将刻度对齐到月份起始点
                    displayFormats: {
                        month: 'MMM' // 显示月份英文缩写
                    },
                    tooltipFormat: 'MMM yyyy' // Tooltip显示完整月份年份
                },
                adapters: {
                    date: {
                        locale: 'en-US' // 确保月份显示为英文格式
                    }
                }
            }
        },
        plugins: {
            legend: {
                display: true
            },
            tooltip: {
                enabled: true
            }
        }
    },
    data: {
        labels: data['labels'],
        datasets: data['datasets']
    }
};

new Chart(
    document.getElementById('acquisitions'),
    config
);

关键配置说明 #

• offset: true：让X轴刻度与图表边缘保持距离，防止起始/结束标签被截断，同时为居中显示提供空间
• min: firstDate：将X轴最小日期提前1天，触发Chart.js生成第一个月份（Jul）的标签
• ticks.align: 'center'：强制标签居中对齐到对应的刻度位置
• time.round: 'month'：将刻度对齐到每个月份的起始点，配合offset让标签自然居中在整个月份分段的中间
• adapters.date.locale：确保月份以英文缩写形式展示（如Jul、Aug）

内容的提问来源于stack exchange，提问作者alextc