Next.js中Chart.js如何修改X轴日期显示样式及标签展示间隔

你需要调整X轴的刻度配置，注意你当前使用的Chart.js v3+版本所有轴配置必须放在scales对应节点下，外层写的xAxis、time配置位置错误，完全不会生效。

1. 替换图表配置 #

把你ChartConfig.js里的options代码替换为以下内容：

export const options = {
    plugins: {
        legend: {
            display: false,
        },
    },
    lineHeightAnnotation: {
        always: true,
        lineWeight: 3,
    },
    animation: {
        duration: 1,
    },
    scales: {
        x: {
            display: true,
            // X轴刻度规则配置
            ticks: {
                maxRotation: 0, // 强制标签最大旋转角度为0，实现横向显示
                minRotation: 0, // 最小旋转角度同步设为0，避免自动斜向展示
                stepSize: 3, // 每隔3个刻度显示一个标签
                autoSkip: false // 关闭自动跳过逻辑，严格按照stepSize间隔展示
            }
        },
        y: { 
            display: true 
        },
    }
};

2. 配置效果说明 #

• 横向显示：通过设置ticks.maxRotation和ticks.minRotation为0，禁用Chart.js默认的标签自动旋转逻辑，所有日期标签会保持水平横向展示。
• 间隔显示：ticks.stepSize = 3会让X轴从第一个刻度开始，每间隔3个日期才渲染一个标签，从根源上避免标签过密重叠的问题，如果需要调整间隔密度，直接修改这个数值即可，比如设为5就是每5个日期显示一个。

可选优化建议 #

你当前组件里获取数据后循环组装数组的写法存在不必要的性能消耗，不需要在每次push元素的时候都调用setState，可以等数组装填完成后一次性更新状态，修改fetch回调里的逻辑即可：

.then((data) => {
    const priceArr = []
    const dateArr = []
    for (let i = 0; i < data.prices.length; i++) {
        priceArr.push(data.prices[i][1])
        dateArr.push(new Date(data.prices[i][0]).toLocaleDateString("en-GB"))
    }
    setCoinPrice(priceArr)
    setCoinHistory(dateArr)
})

另外你定义的determineTimeFormat函数目前没有被调用，且switch case没有加break会出现逻辑穿透问题，如果要使用这个函数记得补break并在timeFormat变化时触发调用。

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