ChartJS能否实现X轴基于数据自动按天计算、格式化显示为月份？

问题原因 #

你当前代码无数据渲染的核心原因是：使用time类型的X轴时，Chart.js要求每个数据点必须关联对应的时间信息，仅传入纯数值数组无法匹配时间轴的坐标映射，所以没有内容输出。

实现方案 #

你需要先将现有的纯数值数组，转换为包含x（对应日期）和y（对应数值）的结构化数据，按照「从今日倒推」的规则生成每个数据点的日期即可。X轴会自动根据数据的时间跨度计算要显示的月份刻度，完全符合你提到的自适应需求：数据跨度不足1个月仅显示当月，跨度足够时自动展示对应数量的月份。

注意：Chart.js 3.x及以上版本使用时间轴需要配套引入日期适配器，你可以直接引入chartjs-adapter-date-fns（npm安装或者CDN引入都可）。

修改后可用代码 #

// 提前引入日期适配器：import 'chartjs-adapter-date-fns'; 或者通过CDN引入
function populateLine(elementID, rawData) {
    // 把原始纯数值数组转换为带时间的结构化数据，从今日倒推，每个点间隔1天
    const formattedData = rawData.map((value, index) => {
        // 倒推逻辑：最后一个数据点对应今日，index越大越靠近今日
        const date = new Date();
        date.setDate(date.getDate() - (rawData.length - 1 - index));
        return {
            x: date,
            y: value
        };
    });

    let linectx = document.getElementById(elementID).getContext('2d');
    const _lineChart = new Chart(linectx, {
        type: 'line',
        data: {
            datasets: [{
                data: formattedData,
                borderWidth: 3
            }]
        },
        options: {
            plugins: {
                legend: {
                    display: false
                },
            },
            scales: {
                x: {
                    grid: {
                        display: false
                    },
                    type: 'time',
                    time: {
                        unit: 'month',
                        // 可自定义月份显示格式，比如'yyyy-MM'或者'MMM'
                        tooltipFormat: 'yyyy-MM',
                        displayFormats: {
                            month: 'MMM'
                        }
                    },
                    ticks: {
                        autoSkip: true
                    }
                },
                y: {
                    grid: {
                        display: false
                    },
                    beginAtZero: true // 按需开启，控制Y轴是否从0开始
                }
            },
            elements: {
                point: {
                    radius: 0
                }
            }
        }
    });
}

效果说明 #

• 传入5个数据点时，时间跨度只有5天，X轴仅会显示当前月份的刻度
• 传入144个数据点时，时间跨度约为4.7个月，X轴会自动显示跨度范围内的所有月份刻度
• 不需要手动配置labels，所有时间刻度完全基于你的数据自动生成，且符合从今日倒推的业务规则

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