小条形图数据标签显示问题：如何实现欧盟化石能源规范图的小值解决方案？

方案1：用隐形最小高度辅助条形承载标签 #

这是最直接稳定的方案——给小数值的条形设置一个固定的最小高度（比如1），颜色设为透明，同时把原始数值绑定到数据点上，让标签显示真实数值。这样标签有了载体，不会因为原条形太小而消失，视觉上也完全不影响原图表：

{
  name: 'Summa',
  stack: 0,
  color: 'transparent', // 隐藏条形本身
  borderColor: 'transparent',
  data: [
    { y: 1, originalVal: 0.5 }, // 小数值替换为最小高度1
    { y: 60, originalVal: 60 },
    { y: 40, originalVal: 40 }
  ],
  dataLabels: {
    format: '{point.originalVal} %', // 显示原始数值
    y: -20,
    backgroundColor: 'white',
    borderWidth: 1,
    borderColor: '#303030',
    crop: false,
    overflow: 'none'
  }
}

方案2：强制数据标签不裁剪+固定偏移 #

如果不想额外加辅助条形，可以直接配置数据标签的裁剪规则，强制让标签显示在图表外部，同时调整偏移量避免被遮挡：

dataLabels: {
  format: '{y} %',
  y: -25, // 根据实际布局调整偏移量
  backgroundColor: 'white',
  borderWidth: 1,
  borderColor: '#303030',
  crop: false, // 禁止裁剪标签
  overflow: 'none', // 允许标签溢出图表容器
  style: {
    zIndex: 1000 // 确保标签在所有元素上层
  }
}

方案3：动态计算标签位置（进阶） #

如果需要更灵活的定位，可以利用图表的render事件，动态检测小数值的标签位置，自动调整偏移：

chart: {
  events: {
    render: function() {
      const chart = this;
      chart.series.forEach(series => {
        series.points.forEach(point => {
          if (point.y < 1) { // 设定小数值判断阈值
            const label = point.dataLabel;
            if (label) {
              // 把标签移到条形上方，避免被裁剪
              label.attr({
                y: chart.plotTop - 10, // 基于图表顶部定位
                x: label.attr('x') // 保持水平位置不变
              });
            }
          }
        });
      });
    }
  }
}

推荐方案 #

优先选方案1，逻辑简单，不需要复杂的位置计算，能保证标签始终有载体，不会出现意外的裁剪问题，完全匹配原设计的效果。

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