如何为Highcharts饼图数据绑定固定对应颜色（避免过滤后颜色错乱）

现有一Highcharts饼图，需要将“Ace Falling Load”绑定为橙色、“3-Point Technique”绑定为绿色。曾尝试使用如下代码：

Highcharts.setOptions({
  colors: ['#F64A16', '#0ECDFD',]
});

该代码在页面加载时正常，但当用户应用过滤导致“Ace Falling Load”项消失时，颜色会出现错乱。请问是否有方法在Highcharts中始终为特定值绑定固定颜色，并请提供示例。

要解决这个问题，不能依赖全局的colors配置（它是按数据项顺序分配颜色的，过滤后顺序变化会导致颜色错乱），推荐两种直接绑定特定项颜色的方案：

方案一：数据项直接指定颜色 #

在构造饼图的series.data中，给需要固定颜色的项直接添加color属性，这样无论数据如何过滤，对应项的颜色都不会改变：

Highcharts.chart('container', {
  chart: {
    type: 'pie'
  },
  title: {
    text: '饼图固定颜色示例'
  },
  series: [{
    name: '技术类型',
    data: [
      { name: 'Ace Falling Load', y: 30, color: '#F64A16' }, // 橙色
      { name: '3-Point Technique', y: 25, color: '#2ECC71' }, // 绿色
      { name: '其他技术1', y: 20 },
      { name: '其他技术2', y: 25 }
    ]
  }]
});

方案二：通过颜色映射表动态赋值 #

如果数据是动态获取的，可以先定义一个颜色映射对象，再在图表加载时遍历数据给对应项绑定颜色：

// 定义固定颜色映射表
const colorMap = {
  'Ace Falling Load': '#F64A16',
  '3-Point Technique': '#2ECC71'
};

Highcharts.chart('container', {
  chart: {
    type: 'pie',
    events: {
      load: function() {
        // 遍历数据项，匹配映射表设置颜色
        this.series[0].data.forEach(point => {
          if (colorMap[point.name]) {
            point.update({ color: colorMap[point.name] }, false);
          }
        });
        this.redraw();
      }
    }
  },
  title: {
    text: '动态绑定固定颜色示例'
  },
  series: [{
    name: '技术类型',
    data: [
      ['Ace Falling Load', 30],
      ['3-Point Technique', 25],
      ['其他技术1', 20],
      ['其他技术2', 25]
    ]
  }]
});

这两种方案都能确保，只要数据项的名称匹配，无论过滤后显示哪些项，对应颜色都会保持固定，不会出现错乱。

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