Chart.js设置x轴ticks.display为false后刻度仍显示问题求助

你使用的是Chart.js v2版本的配置语法，若当前项目引入的是v3及以上版本的Chart.js，原有的xAxes/yAxes数组格式配置已经被废弃，对应的属性名也做了调整，因此你写的x轴刻度隐藏配置不会生效。

解决方案（适配v3/v4版本，也是目前主流的Chart.js版本） #

调整配置结构如下：

options: {
  responsive: true,
  legend: {
    display: false,
  },
  scales: {
    // 原yAxes配置改为y字段直接配置
    y: {
      ticks: {
        color: "rgba(255, 255, 255, 1)", // 原fontColor改为color
      },
      grid: { // 原gridLines改为grid
        display: false,
      },
    },
    // 原xAxes配置改为x字段直接配置
    x: {
      ticks: {
        color: "rgba(255, 255, 255, 1)",
        display: false, // 这里的隐藏配置就会生效了
      },
      grid: {
        color: "rgba(255, 255, 255, .2)",
        borderDash: [5, 5],
        zeroLineColor: "rgba(255, 255, 255, .2)",
        zeroLineBorderDash: [5, 5],
      },
    },
  },
}

如果确认你使用的是v2版本的Chart.js，请检查以下两点：

• 确认options配置是正确传入new Chart()的第二个参数，没有被其他配置覆盖
• 确认没有在图表初始化后调用过update方法重写了x轴刻度配置

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