ChartJS 2如何全局移除xAxis网格线 配置后出现多余坐标轴如何解决

问题原因 #

出现随机多余坐标轴，通常是以下两个原因导致：

• 坐标轴未指定唯一ID，数据集未绑定对应轴，ChartJS 自动生成了额外的默认坐标轴
• 配置参数类型错误，导致原有配置解析失败，触发默认坐标轴生成逻辑（你原配置中borderDashOffset传入了数组，该参数实际仅支持数值类型）

修复方案 #

步骤1：修正gridLines配置，明确指定坐标轴ID #

scales: {
    xAxes: [{
        id: 'x-custom',
        display: true,
        gridLines: {
            display: false,
        }
    }],
    yAxes: [{
        id: 'y-custom',
        display: true,
        gridLines: {
            display: true,
            borderDash: [2],
            borderDashOffset: 2, // 修正参数类型为数值
            color: 'rgba(0, 0, 0, 0.04)',
            drawBorder: false,
            drawTicks: false,
        }
    }]
}

步骤2：给数据集绑定对应坐标轴ID #

在你的datasets配置中，给每个数据集添加对应轴的绑定属性，避免ChartJS自动生成新轴：

datasets: [{
    // 你原有数据集的其他配置：label、data、样式等
    xAxisID: 'x-custom',
    yAxisID: 'y-custom'
}]

额外排查点 #

如果是动态更新图表场景，每次更新配置前请先调用chart.destroy()销毁旧实例，再用新配置初始化，避免旧配置残留导致多余轴生成。

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