如何为Highcharts多组条形图自定义不同数据标签格式？

要实现每个条形显示对应数据，只需在Highcharts配置中针对每个系列开启并配置数据标签（dataLabels），以下是具体调整方案：

核心配置修改 #

1. 为每个系列添加dataLabels配置，启用标签并自定义显示内容
2. 调整标签位置与样式，避免遮挡或重叠

修改后的关键代码片段 #

const data = [
  { name:"Apple", Actual_Selling : 1220 , Estimated_selling : 2000},
  { name:"Orange", Actual_Selling : 45 , Estimated_selling : 800},
  { name:"Pears", Actual_Selling : 1220 , Estimated_selling : 300},
  { name:"Grape", Actual_Selling : 456 , Estimated_selling : 56},
  { name:"Banana", Actual_Selling : 55 , Estimated_selling : 800}
];

Highcharts.chart('container', {
  chart: { type: 'bar' },
  title: { text: '销售数据对比' },
  xAxis: { categories: data.map(item => item.name) },
  yAxis: { title: { text: '销售额' } },
  series: [
    {
      name: '实际销售额',
      data: data.map(item => item.Actual_Selling),
      // 配置实际销售额的标签
      dataLabels: {
        enabled: true,
        align: 'right',
        x: -10, // 调整标签位置，避免超出条形
        formatter: function() {
          return this.y; // 显示当前条形的数值
        }
      }
    },
    {
      name: '预估销售额',
      data: data.map(item => item.Estimated_selling),
      // 配置预估销售额的标签
      dataLabels: {
        enabled: true,
        align: 'left',
        x: 10, // 调整标签位置
        formatter: function() {
          return this.y;
        }
      }
    }
  ]
});

配置说明 #

• enabled: true：开启数据标签显示
• align：设置标签对齐方式，实际销售额用right贴在条形右侧内部，预估销售额用left贴在条形左侧内部
• x：调整标签的水平偏移量，避免标签超出条形边界
• formatter：自定义标签显示内容，这里直接返回当前条形的数值this.y

如果需要显示更丰富的内容（比如带单位），可以修改formatter函数：

formatter: function() {
  return `${this.y} 元`;
}

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