Angular Highcharts 9.1.0词云自定义颜色数组不生效如何解决

你遇到的颜色不生效问题，核心是colors配置项的层级放置错误，同时可能存在styledMode开启冲突的问题，可通过以下两种方案解决：

方案1：全局配置词云颜色数组，自动分配颜色 #

把原来写在series内的colors数组移到options顶层配置，同时关闭styledMode（如果之前开启的话），正确配置如下：

this.options = {
  // 颜色数组放在顶层配置，所有系列会按规则取用
  colors: ['red', 'green', 'blue', '#f5a623', '#4a90e2'],
  // 务必关闭styledMode，否则JS配置的颜色会被CSS类覆盖
  chart: {
    styledMode: false
  },
  series: [{
    type: 'wordcloud',
    data,
    name: 'Occurrences',
    minFontSize: 12,
    maxFontSize: 42,
    // colorByPoint默认是true，不需要额外配置也可生效
    colorByPoint: true
  }]
};

该配置下，词云会自动循环取colors数组里的颜色给每个词语赋值，随机性符合常规需求。

方案2：精准控制单个词语的颜色 #

如果需要指定某个词语的固定颜色，直接在data的每个数据项里添加color字段即可，无需依赖全局colors数组：

const data = [
  { name: '关键词1', weight: 32, color: 'red' },
  { name: '关键词2', weight: 28, color: '#2ecc71' },
  { name: '关键词3', weight: 25, color: 'blue' },
  // 剩余未指定color的词会自动从顶层colors数组取色
  ...otherData
];

this.options = {
  colors: ['#9b59b6', '#f1c40f', '#e74c3c'],
  chart: {
    styledMode: false
  },
  series: [{
    type: 'wordcloud',
    data,
    name: 'Occurrences',
    minFontSize: 12,
    maxFontSize: 42
  }]
};

注意事项 #

• 如果之前开启了styledMode，务必关闭，否则所有JS层面的颜色配置都会失效，只能通过CSS类修改颜色，无法实现自定义颜色分配逻辑。
• 词云系列本身不支持在series层级配置colors数组，该配置仅支持放在options顶层，这是官方定义的配置规则。

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