如何为Google Charts饼图按公司名称指定固定切片颜色？

要解决这个问题，核心是不要用固定顺序的颜色数组，而是创建一个「公司名称→颜色」的映射关系，再根据实际渲染的公司数据动态生成对应颜色数组，这样不管哪家公司数据缺失，剩下的公司都会匹配到自己对应的颜色。

具体实现步骤如下：

1. 定义公司与颜色的映射关系 #

先在JS里创建一个对象，把四家公司的名称和对应的颜色一一绑定（注意公司名称要和PHP输出的完全一致，比如你代码里用了strtoupper转大写，所以映射里的公司名也要大写）：

// 公司名称到颜色的映射，确保名称和PHP输出的完全匹配（比如大写）
const companyColorMap = {
    "COMPANY_A": "#351c15", // 替换成你实际的公司大写名称
    "COMPANY_B": "#462895",
    "COMPANY_C": "#d81013",
    "COMPANY_D": "#f89729"
};

2. 动态生成对应颜色数组 #

在获取到data_pie数据后，遍历每一行的公司名称，从映射表中取出对应颜色，生成动态的colors数组：

var data_pie = google.visualization.arrayToDataTable([
    ['Value', 'Total value'],
    <?php 
        foreach( $value as $list_item ){ // 修正原代码笔误：$valueas → $value
            echo '["'.strtoupper( $list_item->company_name ).'", '.$list_item->total_value.'],'; // 修正原代码笔误：$list_item2 → $list_item
        }
    ?>
]);

// 动态生成colors数组：遍历数据中的公司名称，匹配对应颜色
var dynamicColors = [];
for (var i = 1; i < data_pie.getNumberOfRows(); i++) {
    var companyName = data_pie.getValue(i, 0);
    dynamicColors.push(companyColorMap[companyName]);
}

3. 更新图表配置 #

把原来固定的colors数组替换成上面生成的dynamicColors：

var options_pie = {
    title: 'Total Value',
    titleTextStyle: {
        fontSize: 16,
        color:'rgb(117, 117, 117)',
        bold: 0,
        fontName: 'Roboto'
    },
    is3D: true,
    'height':chartheight2,
    pieSliceText: 'value',
    colors: dynamicColors, // 替换为动态生成的颜色数组
    legend: {position: 'bottom'},
};

额外注意事项 #

• 确保companyColorMap里的公司名称和PHP输出的完全一致（比如你用了strtoupper，所以映射里的名称必须是大写），否则会匹配不到颜色。
• 原代码里的两处笔误记得修正，否则PHP会出现运行错误。

这样修改后，不管哪几家公司有数据，每个显示的切片都会对应到自己公司的固定颜色，不会因为顺序变化导致颜色错位。

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