Angular ngx-charts垂直堆叠条形图Y轴仅显示Total值问题

问题原因 #

你当前的图表应该是开启了堆叠模式，导致同类别下的Takes和Total值被累加，Y轴刻度基于总和（30）。yAxisTickFormatting只是用来格式化刻度文本，无法改变Y轴的计算逻辑，所以不起作用。

解决方案 #

1. 关闭堆叠模式（优先推荐） #

如果需要保留两个泳道条形（同时显示Takes和Total），但Y轴基于单个series的最大值（即Total的20），只需关闭图表的堆叠配置：

// nvd3 库示例
const chart = nv.models.multiBarChart()
  .stacked(false); // 关闭堆叠，改为分组显示，Y轴自动取所有series的最大值

// Chart.js 库示例
const config = {
  type: 'bar',
  data: {
    // 对应你的数据转换后结构
  },
  options: {
    scales: {
      x: { stacked: false },
      y: { stacked: false }
    }
  }
};

关闭堆叠后，Y轴会自动使用所有series中的最大值（这里就是Total的20），不会再累加两个值。

2. 手动指定Y轴范围 #

如果需要更精准控制Y轴（比如强制Y轴最大值为Total的值），可以先提取数据中的Total值，再手动设置Y轴的定义域：

// 提取所有Total值的最大值
const maxTotal = multi.reduce((max, item) => {
  const total = item.series.find(s => s.name === 'Total').value;
  return total > max ? total : max;
}, 0);

// nvd3 中设置Y轴范围
const chart = nv.models.multiBarChart()
  .yDomain([0, maxTotal]); // 强制Y轴从0到maxTotal

// Chart.js 中设置Y轴范围
const config = {
  options: {
    scales: {
      y: {
        max: maxTotal,
        min: 0
      }
    }
  }
};

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