如何根据数据量动态设置图表高度？优化现有条件判断代码

这确实是个典型的“条件判断冗余”问题——一堆if-else堆在一起不仅看着乱，后期要加新的区间或者调整高度值时，改起来也容易出错。我给你几个更优雅的实现思路，按需选择就行：

1. 区间映射表（最推荐，维护性拉满） #

把区间阈值和对应的高度值整理成配置数组，用查找逻辑替代硬编码的条件判断。这种方式把配置和逻辑完全分离，后期要加新区间只需要在数组里加一行，不用动业务代码：

// 定义区间配置：key是最大长度，value是对应高度
const heightConfig = [
  { maxLength: 1, height: 15 },
  { maxLength: 5, height: 25 },
  { maxLength: 10, height: 35 },
  { maxLength: 15, height: 40 },
  { maxLength: 20, height: 50 },
  { maxLength: 25, height: 60 },
  // 后续加新区间直接在这里追加即可
];

const dataLength = array_date.length;
// 找到第一个符合当前数据长度的配置项
const matchedConfig = heightConfig.find(item => dataLength <= item.maxLength) 
  // 如果超过所有定义的区间，取最后一个配置的高度（也可以自定义默认值）
  || heightConfig[heightConfig.length - 1];

// 应用到画布
ctx.canvas.width = 100;
ctx.canvas.height = matchedConfig.height;

2. 数学公式计算（适合高度有规律的场景） #

如果你的高度变化是有固定规律的（比如每N条数据增加固定高度），可以直接用公式计算。不过看你的示例里高度变化不是完全线性的（比如10→15条只加了5，其他区间加了10），所以可以结合少量判断+公式：

const dataLength = array_date.length;
let height;

if (dataLength <= 1) {
  height = 15;
} else if (dataLength <= 10) {
  // 1-10条：每5条加10
  height = 15 + Math.floor((dataLength - 1) / 5) * 10;
} else if (dataLength <= 15) {
  // 11-15条：固定40
  height = 40;
} else {
  // 15条以上：每5条加10
  height = 40 + Math.floor((dataLength - 15) / 5) * 10;
}

ctx.canvas.width = 100;
ctx.canvas.height = height;

3. Switch语句（比if-else整洁一点） #

如果不想用映射表，也可以用switch(true)的写法，比嵌套if-else可读性好一些，不过维护性还是不如映射表：

const dataLength = array_date.length;
let height;

switch(true) {
  case dataLength <= 1:
    height = 15;
    break;
  case dataLength <= 5:
    height = 25;
    break;
  case dataLength <= 10:
    height = 35;
    break;
  case dataLength <= 15:
    height = 40;
    break;
  case dataLength <= 20:
    height = 50;
    break;
  case dataLength <= 25:
    height = 60;
    break;
  default:
    // 超过25条的默认处理，比如每5条加10
    height = 60 + Math.floor((dataLength - 25) / 5) * 10;
}

ctx.canvas.width = 100;
ctx.canvas.height = height;

个人最推荐第一种映射表方案，不管是现在维护还是未来扩展，都省心很多~

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