如何在Angular项目中为ApexCharts图表设置不同颜色？

你的问题核心在于：当前的Series是单系列多数据点的结构，ApexCharts默认会给整个系列应用同一种颜色，所以你配置的colors数组不会自动分配给每个独立的柱状条。下面提供两种可行的解决方案：

方案一：将单系列拆分为多系列（每个数据点对应一个Series） #

把每个数据点单独包装成一个Series对象，这样colors数组的颜色会依次对应每个Series的柱状条：

修改.ts文件中的series配置：

this.chartJabatan = {
    // 拆分series为多个单数据对象
    series: this.dataJabatan.map((value, index) => ({
        name: this.labelJabatan[index], // 用分类名作为系列名
        data: [value]
    })),
    colors: ['#d4526e', '#13d8aa', '#A5978B', '#2b908f', '#f9a3a4', '#90ee7e', '#f48024', '#69d2e7'],
    chart: {
        type: "bar",
        height: 450
    },
    plotOptions: {
        bar: {
            horizontal: true,
            dataLabels: {
                position: "top"
            }
        }
    },
    // 移除theme.palette，避免和自定义colors冲突
    // theme: {
    //     palette: 'palette1' // upto palette10
    // },
    dataLabels: {
        enabled: true,
        offsetX: -6,
        style: {
            fontSize: "12px",
            colors: ["#fff"]
        }
    },
    stroke: {
        show: true,
        width: 1,
        colors: ["#fff"]
    },
    xaxis: {
        categories: this.labelJabatan
    }
};

方案二：使用颜色回调函数（无需修改Series结构） #

在plotOptions.bar中配置color回调函数，根据数据点的索引返回对应的颜色，适合不想改动原有Series结构的场景：

修改.ts文件中的plotOptions部分：

this.chartJabatan = {
    series: [
        {
            name: "Jabatan",
            data: this.dataJabatan
        }
    ],
    colors: ['#d4526e', '#13d8aa', '#A5978B', '#2b908f', '#f9a3a4', '#90ee7e', '#f48024', '#69d2e7'],
    chart: {
        type: "bar",
        height: 450
    },
    plotOptions: {
        bar: {
            horizontal: true,
            dataLabels: {
                position: "top"
            },
            // 添加颜色回调函数
            color: function({ dataPointIndex }) {
                // 从colors数组中按索引取颜色，超出则循环取色
                return this.colors[dataPointIndex % this.colors.length];
            }
        }
    },
    // 移除theme.palette避免冲突
    // theme: {
    //     palette: 'palette1' // upto palette10
    // },
    dataLabels: {
        enabled: true,
        offsetX: -6,
        style: {
            fontSize: "12px",
            colors: ["#fff"]
        }
    },
    stroke: {
        show: true,
        width: 1,
        colors: ["#fff"]
    },
    xaxis: {
        categories: this.labelJabatan
    }
};

关键注意点 #

• 移除theme.palette配置：这个主题调色板会覆盖你自定义的colors数组，导致颜色不生效。
• HTML部分无需修改：你已经正确绑定了[colors]属性，两种方案都能兼容现有模板。

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