Chart.js移除垂直网格线及resize时固定图表高度方法

移除柱状图垂直网格线 #

垂直网格线是x轴（分类轴）对应的网格渲染元素，直接在对应轴的配置项中关闭网格显示即可，无需修改全局默认配置，配置参考如下：

const barChart = new Chart(document.getElementById('yourCanvasId'), {
  type: 'bar',
  data: {
    // 自行填充业务对应的labels、datasets数据
  },
  options: {
    scales: {
      x: {
        grid: {
          display: false // 关闭x轴关联的垂直网格线
        }
      },
      // y轴配置保持默认即可保留水平网格线，若需隐藏水平网格线同理在y轴节点下配置grid.display: false
    }
  }
})

如果需要同步隐藏x轴的刻度标记线，在x轴配置下额外添加ticks: { display: false }即可，不会影响柱状图的柱体渲染、tooltip交互等核心功能。

resize缩放时固定图表初始高度，取消宽高比联动 #

Chart.js默认开启宽高比锁定逻辑，会根据图表初始渲染的宽高比，随容器宽度变化自动计算调整高度。要实现缩放过程中高度固定、仅宽度自适应的效果，按以下方式配置即可：

• 先给canvas标签的外层父容器设置固定高度，高度值和你需要的初始图表高度保持一致即可，例如给父div添加行内样式style="height: 420px"
• 在图表配置项中关闭宽高比自动维持属性，配置参考如下：

const barChart = new Chart(document.getElementById('yourCanvasId'), {
  type: 'bar',
  data: {
    // 自行填充业务对应的labels、datasets数据
  },
  options: {
    maintainAspectRatio: false, // 关闭宽高比自动计算逻辑
    // 其余原有配置保持不变
  }
})

配置完成后，容器/窗口触发resize事件时，图表只会自动调整宽度适配父容器宽度，高度始终和父容器设置的固定值保持一致，不会随宽度变化同步缩放。

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