Chart.js柱状图位置调整：贴近Y轴及移除X轴多余部分

针对你提到的两个布局问题，直接通过配置项即可解决：

1. 让柱状图贴近Y轴 #

在x轴配置中设置offset: false，该参数默认是true（会让第一个柱子和Y轴之间留间距），设为false后柱子会直接对齐Y轴，和设计图一致。

配置示例：

options: {
  scales: {
    x: {
      offset: false, // 核心配置，消除Y轴与第一个柱子的间距
      // 其他x轴配置...
    }
  }
}

2. 移除最后一个柱状图后的X轴多余部分 #

结合offset: false，再给x轴设置max为最后一个标签的索引，同时关闭右侧多余的刻度线，就能让X轴刚好截止在最后一个柱子的边缘：

配置示例：

options: {
  scales: {
    x: {
      offset: false,
      max: labels.length - 1, // 限制X轴范围到最后一个柱子
      grid: {
        drawTicks: false, // 移除右侧多余的刻度标记
        drawBorder: false // 可选：去掉X轴右侧的边框
      },
      ticks: {
        align: 'center' // 让刻度文字对齐柱子中心，优化视觉效果
      }
    }
  }
}

完整配置示例 #

const myChart = new Chart(document.getElementById('myChart'), {
  type: 'bar',
  data: {
    labels: ['1月', '2月', '3月', '4月', '5月'], // 你的标签数组
    datasets: [{
      label: '业务数据',
      data: [15, 22, 18, 25, 19], // 你的数据数组
      backgroundColor: '#4285F4'
    }]
  },
  options: {
    scales: {
      x: {
        offset: false,
        max: labels.length - 1,
        grid: {
          drawTicks: false,
          drawBorder: false
        },
        ticks: {
          align: 'center'
        }
      },
      y: {
        beginAtZero: true // 根据需求开启/关闭
      }
    }
  }
});

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