Angular中ApexCharts柱状图按值变色并排除指定系列

在Angular组件中用ApexCharts实现了包含“Indicador（指标）”和“Bonus（奖金）”的堆叠柱状图，已配置全局颜色规则：数值在0-99区间的柱子显示红色，大于99显示绿色，该规则正常生效。但希望“Bonus”系列固定显示蓝色，不受上述全局规则影响，尝试在series中给“Bonus”设置color属性未生效，寻求解决方法。

当前使用的代码：

this.chartOptionsKpi = {
      series: [
        {
          name:'Indicador',
          data: this.indicadores,
        },
        {
          name: 'Bonus',
          data: this.bonus,
          color: '#379cdb'
        },
        
      ],
      chart: {
        height: 450,
        width: '100%',
        type: "bar",
        stacked: true,
      },
      plotOptions: {
       
        bar: {
          colors: {
          ranges: [
            {
              from: 0,
              to: 99,
              color: '#FF0000', 
            },
            {
              from: 100,
              to: 1000,
              color: '#008542', 
            },
            // add more ranges as needed
          ],
        },
          horizontal: false,
          // distributed: true,
          barHeight: '80%', 
          barWidth: '30%', 
          dataLabels: {
            position: 'top',
          }
        }
        
      },
      title: {
        text: "Indicador PEP - Mês"
      },
      xaxis: {
        labels: {
          style: {
            fontSize: '10px',
            fontWeight: 400,
        }, 
          rotate: -90,
        },
        type: "category",
        categories:this.refinariasNomes
      },
      colors: ['#008542','#379cdb'],
      
    };

解决方案 #

问题根源是全局的plotOptions.bar.colors.ranges规则优先级高于系列单独设置的color属性，会覆盖你设置的蓝色。要实现需求，需针对不同系列单独处理颜色逻辑：

1. 移除全局的plotOptions.bar.colors.ranges配置
2. 使用plotOptions.bar.colors.background回调函数，根据系列索引区分颜色规则：
   • 索引0（Indicador系列）按数值区间返回红/绿色
   • 索引1（Bonus系列）直接返回固定蓝色

修改后的完整代码：

this.chartOptionsKpi = {
  series: [
    {
      name:'Indicador',
      data: this.indicadores,
    },
    {
      name: 'Bonus',
      data: this.bonus,
    },
  ],
  chart: {
    height: 450,
    width: '100%',
    type: "bar",
    stacked: true,
  },
  plotOptions: {
    bar: {
      colors: {
        background: ({ seriesIndex, dataPointIndex, w }) => {
          const value = w.globals.series[seriesIndex][dataPointIndex];
          // 处理Indicador系列的区间颜色
          if (seriesIndex === 0) {
            return value <= 99 ? '#FF0000' : '#008542';
          }
          // Bonus系列固定蓝色
          return '#379cdb';
        }
      },
      horizontal: false,
      barHeight: '80%', 
      barWidth: '30%', 
      dataLabels: {
        position: 'top',
      }
    }
  },
  title: {
    text: "Indicador PEP - Mês"
  },
  xaxis: {
    labels: {
      style: {
        fontSize: '10px',
        fontWeight: 400,
      }, 
      rotate: -90,
    },
    type: "category",
    categories: this.refinariasNomes
  },
};

说明 #

• background回调函数可精准控制每个数据点的颜色，优先级高于全局配置
• 通过seriesIndex区分两个系列，实现差异化颜色规则
• 移除原有的colors数组配置，避免与回调逻辑冲突

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