Chart.js的drawBorder配置不生效 无法移除坐标轴边框问题排查求助

核心问题说明 #

1. 配置层级错误：你此前将x/y轴配置写到了legend（图例）配置项下，属于层级写错位，不管什么图表类型都不会生效。
2. 配置与图表类型不匹配：你当前使用的是pie（饼图）类型，饼图属于非笛卡尔坐标系图表，本身不会渲染x/y轴，所有scales下的轴配置对饼图完全无效。
3. 版本适配问题：你尝试的两种scales写法对应Chart.js不同大版本：xAxes/yAxes数组写法是v2版本的配置规范，x/y对象下的grid配置是v3/v4版本的配置规范，混用版本配置会直接失效。

分场景解决方案 #

场景1：你实际要使用的是柱状图（bar）

先确认你引入的Chart.js版本，对应使用正确配置：

适配Chart.js v2版本

options: {
    maintainAspectRatio: false,
    legend: {
        display: false
    },
    scales: {
        xAxes: [{
            ticks: { beginAtZero: true },
            gridLines: {
                display: false,
                drawBorder: false
            }
        }],
        yAxes: [{
            gridLines: {
                display: false,
                drawBorder: false
            }
        }]
    }
}

适配Chart.js v3/v4版本

options: {
    maintainAspectRatio: false,
    legend: {
        display: false
    },
    scales: {
        x: {
            ticks: { beginAtZero: true },
            grid: {
                display: false,
                drawBorder: false,
                drawOnChartArea: false,
                drawTicks: false
            }
        },
        y: {
            grid: {
                display: false,
                drawBorder: false,
                drawOnChartArea: false,
                drawTicks: false
            }
        }
    }
}

场景2：你确实要使用饼图

你看到的边框属于以下两种情况，对应修改即可：

• 扇区间的分隔边框：将dataset下的borderWidth设置为0

datasets: [{
    label: "Pie Chart (CO2)",
    data: co2RepArray,
    backgroundColor: ["rgba(242, 168, 54)", "rgba(145, 65, 72)", "rgba(74, 25, 92)"],
    borderWidth: 0
}]

• canvas元素的CSS边框：检查对应canvas的样式配置，移除border相关属性即可。

额外说明：你代码中重复定义了两次backgroundColor，后者会覆盖前者的半透明配置，冗余代码可以删除。

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