Angular中Highcharts Sunburst图表无法显示多种颜色问题求助

我在Angular中用Highcharts实现Sunburst图表，图表能正常渲染，但颜色配置失效：明明定义了完整的colors数组，可所有节点只显示数组里的第一个颜色。

我的代码： #

this.chart = Highcharts.chart('container', {
      chart: {
        type: 'sunburst',
        height: '100%'
      },
      colors: ['#2f7ed8', '#0d233a', '#8bbc21', '#910000', '#1aadce',
        '#492970', '#f28f43', '#77a1e5', '#c42525', '#a6c96a'], 
      title: {
          text: 'PSec GEARS Function Usage'
      },
      subtitle: {
          text: 'Top 10 Functions used as % per User for the last Month'
      },
      credits: {
          enabled: false
      },
      tooltip: {
        headerFormat: '',
        pointFormat: 'The population of <b>{point.name}</b> is <b>{point.value}</b>'
      }, 

      series: [{
        type: "sunburst",
        data: this.dataValues,
        cursor: 'pointer',
        dataLabels: {
            format: '{point.name}',
            filter: {
                property: 'innerArcLength',
                operator: '>',
                value: 16
            },
            rotationMode: 'circular'
        },
        
        levels: [{
          level: 1,
          dataLabels: {
            filter: {
              property: 'outerArcLength',
              operator: '>',
              value: 64
            }
          }
        }, {
          level: 2,
          colorByPoint: true
        },
        {
          level: 3,
          colorVariation: {
            key: 'brightness',
            to: -0.5
          }
        }, {
          level: 4,
          colorVariation: {
            key: 'brightness',
            to: 0.5
          }
        }]
      }]
    });

当前效果截图： #

问题核心原因 #

你只给level:2层级设置了colorByPoint: true，但顶层（level 1）及其他需要独立着色的层级未开启该配置，导致这些层级的所有节点默认复用colors数组的第一个颜色；同时level3、level4的亮度变化是基于父节点颜色的，父节点颜色单一的话，子节点的颜色也不会有多样性。

修复方案 #

方案1：针对性给层级开启着色配置

给需要独立显示不同颜色的层级添加colorByPoint: true，比如顶层level1和level4：

levels: [{
  level: 1,
  colorByPoint: true, // 新增：让顶层节点自动分配colors数组的颜色
  dataLabels: {
    filter: {
      property: 'outerArcLength',
      operator: '>',
      value: 64
    }
  }
}, {
  level: 2,
  colorByPoint: true
},
{
  level: 3,
  colorVariation: {
    key: 'brightness',
    to: -0.5
  }
}, {
  level: 4,
  colorByPoint: true, // 新增：先分配基础色再调整亮度
  colorVariation: {
    key: 'brightness',
    to: 0.5
  }
}]

方案2：全局开启按点着色

如果希望所有层级都自动使用colors数组的颜色，可以直接在series级别设置colorByPoint: true，覆盖层级配置：

series: [{
  type: "sunburst",
  data: this.dataValues,
  colorByPoint: true, // 全局开启：所有节点依次使用colors数组的颜色
  cursor: 'pointer',
  // ...其他配置
}]

修改后，各个节点会依次使用你定义的colors数组颜色，子节点也会基于父节点颜色完成亮度调整，不会再只显示单一颜色。

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