Chart.js垂直堆叠柱状图设置最小高度问题求助

问题根源 #

你之前的代码无效主要有两个原因：

1. 钩子时机错误：afterDatasetsDraw是在图表绘制完成后触发的，此时修改元素属性不会触发重绘，改动无法生效。
2. 属性修改方式错误：getProps()返回的是属性副本，直接修改它不会影响Chart.js内部的元素模型，应该直接操作元素的_model属性。

方案一：修改元素绘制模型（不改动原始数据） #

使用beforeDatasetsDraw钩子（绘制前触发），直接调整柱子的高度和位置，同时处理堆叠顺序避免重叠：

const minBarHeight = 35;

const ExtraHeightPlugin = {
  id: 'ExtraHeightPlugin',
  beforeDatasetsDraw: (chart) => {
    // 按堆叠分组处理（同一stack的数据集归为一组）
    const stacks = {};
    chart.data.datasets.forEach((dataset, idx) => {
      const stackKey = dataset.stack || 'default';
      if (!stacks[stackKey]) stacks[stackKey] = [];
      stacks[stackKey].push({ idx, dataset });
    });

    Object.values(stacks).forEach(stackDatasets => {
      chart.data.labels.forEach((_, index) => {
        let currentYOffset = 0;
        // 按堆叠顺序处理数据集
        stackDatasets.forEach(({ idx }) => {
          const element = chart.getDatasetMeta(idx).data[index];
          const originalHeight = element._model.height;
          
          if (originalHeight > 0 && originalHeight < minBarHeight) {
            const heightDiff = minBarHeight - originalHeight;
            // 修改柱子高度
            element._model.height = minBarHeight;
            // 调整柱子Y坐标（Canvas Y轴向下为正，高度增加需向上偏移）
            element._model.y -= heightDiff;
          }
          currentYOffset += element._model.height;
        });
      });
    });
  }
};

方案二：替换显示数据（简单场景，需处理tooltip） #

如果不想操作元素模型，可以在图表更新前替换小数值为最小显示值，同时在tooltip中展示原始数据：

// 根据你的刻度计算最小显示值，确保对应柱子高度≥35
const minDisplayValue = 5;
let originalData = [];

const ExtraHeightPlugin = {
  id: 'ExtraHeightPlugin',
  beforeUpdate: (chart) => {
    // 保存原始数据
    originalData = chart.data.datasets.map(ds => [...ds.data]);
    // 替换小数值为最小显示值
    chart.data.datasets.forEach((dataset) => {
      dataset.data = dataset.data.map(val => {
        return val > 0 && val < minDisplayValue ? minDisplayValue : val;
      });
    });
  },
  // tooltip回调显示原始数据
  tooltip: {
    callbacks: {
      label: (context) => {
        const originalVal = originalData[context.datasetIndex][context.dataIndex];
        return `${context.dataset.label}: ${originalVal}`;
      }
    }
  }
};

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