Chart.js/ng2-charts如何手动设置横向堆叠条形图的行高度

解决方案 #

ng2-charts 基于 Chart.js 实现，你可以通过 y 轴的配置项手动控制横向条形的高度（即你所说的行高度），以下是具体实现方式：

修改你的 stackedChartOptions 配置，在 y 轴配置中加入对应参数即可：

stackedChartOptions: ChartOptions = {
  responsive: true,
  scales: {
    xAxes: [{ stacked: true }],
    yAxes: [{ 
      stacked: true,
      // 以下参数按需选择使用
      barThickness: 15, // 直接固定条形高度为15像素，数值越小行越窄，设置后不受响应式缩放影响
      // 若需要适配响应式容器，可使用比例参数调整，无需固定像素
      // categoryPercentage: 0.6, // 每个分类行占用的轴空间比例，取值范围0-1，值越小行间距越大、条形高度越小
      // barPercentage: 0.7, // 条形在当前分类行内的占用比例，取值范围0-1，值越小条形本身越窄
    }],
  }
};

参数选择说明

• 固定行高场景：直接使用 barThickness 设置你需要的像素值即可
• 响应式适配场景：组合调整 categoryPercentage 和 barPercentage 两个比例参数，两个值同步调小即可得到更窄的行

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