如何在Angular使用Chart.js创建的图表中去除底部多余灰色线条

你遇到的灰色线条残留问题，分版本对应处理即可：

若使用Chart.js 2.x版本 #

你目前的配置只覆盖了x轴的相关属性，遗漏了y轴的边框配置，补充以下代码即可：

// 关闭y轴的边框绘制
this.lineChartOptions.scales.yAxes[0].gridLines.drawBorder = false;
this.lineChartOptions.scales.yAxes[0].gridLines.display = false;
// 可选：直接隐藏整个x轴，避免残留配置生效
this.lineChartOptions.scales.xAxes[0].display = false;

若使用Chart.js 3.x及以上版本 #

你当前使用的是2.x的旧配置语法，3.x对配置项做了重构，旧写法不会生效，需要替换为新版配置：

this.lineChartOptions.scales = {
  x: {
    display: false, // 直接隐藏整个x轴，包含刻度、网格、边框
    grid: {
      display: false,
      drawBorder: false
    }
  },
  y: {
    display: false, // 直接隐藏整个y轴
    grid: {
      display: false,
      drawBorder: false
    }
  }
}

额外排查项 #

如果调整配置后仍有线条，可补充以下配置排除其他因素：

// 隐藏图例，避免图例边框干扰
this.lineChartOptions.plugins.legend.display = false;

也可以直接给canvas元素添加style="border: none"样式，排除画布自带边框的可能性。

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