Chart.js如何隐藏特定X轴标签但保留对应数据？

问题说明 #

我用React的Chart.js做折线图，X轴是年份数组：

const labels = [2020, 2021, 2030, 2035, 2038, 2040, 2050, 2060];

Y轴对应数据：

const data = [0, 20, 25, 50, 22, 78, 75, 10, 105];

一开始我把非10倍数的年份替换成空字符串，但空标签还是占宽度，现在想把这些空标签彻底隐藏，但对应的 data 点要保留在图表里。当前用的代码是：

<Line
    data={{
        labels: labels.map(value => value % 10 === 0 ? value : ''),
        datasets: [
            {
                label,
                data,
                pointRadius: labels.map(value => value % 10 === 0 ? 2 : 0)
            }
        ]
    }}
/>

想要的效果是：X轴只显示2020、2030、2040这类10倍数的年份，其他年份对应的X轴位置不显示标签，但数据点正常显示，且X轴不会因为空标签留多余空隙。

可行方案 #

别直接把标签改成空字符串，用Chart.js的scales配置来控制X轴刻度显示逻辑就行：

完整代码示例 #

import { Line } from 'react-chartjs-2';
import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend } from 'chart.js';

// 注册需要的Chart.js组件
ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend);

// 你的数据
const labels = [2020, 2021, 2030, 2035, 2038, 2040, 2050, 2060];
const data = [0, 20, 25, 50, 22, 78, 75, 10, 105];

function LineChart() {
    return (
        <Line
            data={{
                labels: labels, // 直接用原始年份数组，别提前替换为空
                datasets: [
                    {
                        label: '数据名称', // 替换成你的实际标签
                        data: data,
                        pointRadius: labels.map(val => val % 10 === 0 ? 2 : 0)
                    }
                ]
            }}
            options={{
                scales: {
                    x: {
                        ticks: {
                            // 控制每个刻度显示什么：只有10倍数的年份才显示，其他返回空
                            callback: function(index) {
                                const year = labels[index];
                                return year % 10 === 0 ? year : '';
                            },
                            autoSkip: false, // 不自动跳过刻度，确保每个数据点都对应正确位置
                            maxRotation: 0, // 标签不旋转，保持水平
                            minRotation: 0
                        }
                    }
                }
            }}
        />
    );
}

export default LineChart;

核心要点 #

1. 保留原始labels数组：不要提前把非目标年份换成空，让Chart.js基于完整数组计算X轴的刻度位置，避免布局错乱。
2. 用ticks.callback控制显示：通过回调函数判断每个年份是否符合条件，只显示10倍数的年份，其他返回空，Chart.js会自动不渲染空标签的占位。
3. autoSkip设为false：防止Chart.js自动跳过某些刻度，保证每个数据点对应的X轴位置都被正确处理。

这样配置后，X轴只会显示你需要的年份标签，非目标年份的位置没有标签，也不会留多余空隙，数据点依然正常对应显示在图表上。

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