Angular中Chart.js水平条形图固定条形宽度的实现问题咨询

我完全懂你现在的困扰——明明给<p-chart>设了固定宽高，结果水平条形图的条宽却跟着数据忽宽忽窄，试了各种配置都没搞定，确实挺闹心的。

先帮你梳理下问题所在，再给你具体的解决办法：

首先，你的配置里有个小坑 #

看你贴的options，在scales外面单独写了x和y的配置（beginAtZero: true, stacked: true这些），这部分是无效的，Chart.js只会读取scales对象内部的轴配置，这部分无效代码可能会干扰其他配置的生效，先把它们移到对应的scales.x和scales.y里面去。

核心解决思路：针对水平条形图的条宽配置 #

因为你设置了indexAxis: 'y'（水平条形图），条形的宽度是由y轴的配置控制的，而不是x轴。之前你试的barThickness等属性没生效，大概率是配置的位置不对。

你可以通过以下两种方式固定条宽：

方式1：在y轴配置里强制固定条宽

修改scales.y的配置，直接设置barThickness为固定像素值，同时配合categoryPercentage和barPercentage确保条形占满分类空间：

scales: {
  x: {
    display: false,
    beginAtZero: true,
    stacked: true
  },
  y: {
    display: false,
    beginAtZero: true,
    stacked: true,
    barThickness: 20, // 这里设置你想要的固定条宽，比如20px
    categoryPercentage: 1, // 让分类占满y轴的可用宽度
    barPercentage: 1 // 让条形占满分类的宽度
  }
}

方式2：在数据集里直接指定条宽

如果你的图表有多个数据集，也可以在每个dataset对象里添加barThickness属性，这样能单独控制每个数据集的条宽：

datasets: [
  {
    label: '你的标签',
    data: [你的数据],
    barThickness: 20, // 固定条宽
    // 其他数据集配置...
  }
]

最后检查关键配置 #

确保你已经开启了maintainAspectRatio: false（你已经设置了），这样Chart.js会完全遵循你给的canvas宽高，不会自动调整比例影响条宽。

把这些调整完之后，不管数据怎么变，条形的宽度都会保持你设置的固定值啦。

内容来源于stack exchange