Chart.js堆叠条形图顶部圆角与上方条形间隙填充方案咨询

问题出在你全局给所有条形都设置了顶部圆角，导致堆叠的每个条形顶部都带圆角，上下条形之间自然会出现空白间隙。要解决这个问题，只给每个堆叠组最顶部的条形设置圆角即可，其他条形不设置圆角。

具体做法是用Chart.js的脚本化选项（scriptable options），动态判断当前条形是否属于最顶部的数据集，再决定是否添加圆角：

修改配置中elements部分为以下代码：

elements: {
  bar: {
    borderRadius: (context) => {
      // 判断当前数据集是否是堆叠的最顶部（最后一个数据集）
      const isTopDataset = context.datasetIndex === context.chart.data.datasets.length - 1;
      // 仅给最顶部的条形设置顶部圆角，其他条形圆角为0
      return isTopDataset ? { topLeft: 4.6, topRight: 4.6 } : 0;
    }
  }
}

完整修改后的配置代码： #

options: {
  responsive: true,
  lineTension: 1,
  plugins: {
    legend: {
      position: 'bottom',
      // 禁止点击图例过滤
      onClick: function (evt, item, legend) {
        return;
      },
      labels: {
        usePointStyle: 'circle',
      },
    }
  },
  elements: {
    bar: {
      borderRadius: (context) => {
        const isTopDataset = context.datasetIndex === context.chart.data.datasets.length - 1;
        return isTopDataset ? { topLeft: 4.6, topRight: 4.6 } : 0;
      }
    }
  },
  scales: {
    y: {
      stacked: true,
      ticks: {
        maxTicksLimit: 6,
        callback: function(value, index, ticks) {
          return value + ' min';
        }
      },

    },
    x: {
      stacked: true,
      grid: {
        color: "rgba(0, 0, 0, 0)",
      }
    }
  }
}

如果你的堆叠数据集顺序可能调整，或者部分x轴位置的堆叠层级不同，可以进一步通过计算数据点的顶部位置来精确判断，但上述方法已经能覆盖绝大多数场景，解决你遇到的间隙问题。

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