如何在Highcharts堆叠图中为特定数据及隐藏场景设置border-radius

核心逻辑是判断堆叠顶层的可见系列，动态配置圆角属性，两种实现方式可选： #

方式一：通用兼容方案（适配所有Highcharts版本） #

需要手动监听系列显隐事件，触发圆角更新：

1. 图表基础配置中添加系列显隐监听

plotOptions: {
  column: {
    stacking: 'normal'
  },
  series: {
    events: {
      // 系列显隐时都触发圆角更新
      hide: function() {
        updateBorderRadius(this.chart);
      },
      show: function() {
        updateBorderRadius(this.chart);
      }
    }
  }
}

2. 实现圆角更新工具函数

function updateBorderRadius(chart) {
  // 判断上层蓝色系列是否可见，可根据你实际的系列name/index调整判断规则
  const isBlueVisible = chart.series.find(series => series.name === '上层蓝色系列名称')?.visible ?? false;

  chart.series.forEach(series => {
    // 遍历所有可见数据点更新圆角
    if (series.visible) {
      series.points.forEach(point => {
        let borderRadius = 0;
        // 蓝色系列可见时，仅给蓝色系列加顶部圆角
        if (isBlueVisible && series.name === '上层蓝色系列名称') {
          borderRadius = '8px 8px 0 0'; // 圆角数值可自定义
        }
        // 蓝色系列隐藏时，给黑色系列加顶部圆角
        if (!isBlueVisible && series.name === '下层黑色系列名称') {
          borderRadius = '8px 8px 0 0';
        }
        point.update({ borderRadius }, false);
      });
    }
  });
  // 批量更新后统一重绘，避免多次重绘影响性能
  chart.redraw();
}

3. 图表初始化完成后首次调用函数，保证初始状态圆角正确

const chart = Highcharts.chart('container', {
  // 你的完整图表配置项
});
updateBorderRadius(chart);

方式二：简化方案（仅适配Highcharts v10.0+版本） #

高版本Highcharts已经内置堆叠顶层元素自动加圆角的能力，无需手动写监听逻辑，直接配置即可：

plotOptions: {
  column: {
    stacking: 'normal',
    borderRadius: {
      radius: 8, // 自定义圆角大小
      where: 'end' // 仅给每个堆叠组的最上层可见元素加圆角
    }
  }
}

该配置会自动识别堆叠组的顶层可见系列，蓝色系列显示时给蓝色加圆角，蓝色隐藏时自动给下层黑色系列加圆角，完全匹配需求。

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