Plotly Express Bar：如何为按钮选择的条形分配颜色？需添加什么到updatemenus？

要让切换按钮时每个条形保持对应GEO的固定颜色，你需要在updatemenus的args和args2中同步更新每个条形的颜色，同时确保数据顺序和初始图表的trace顺序一致。具体步骤如下：

关键修改点 #

1. 对数据按GEO排序，保证切换时每个条形对应的数据顺序和初始图表的trace顺序匹配；
2. 提取初始图表中每个GEO对应的颜色，保存为固定列表；
3. 在按钮的更新参数中，除了更新y值，还要传入marker.color参数，复用之前保存的颜色列表。

修改后的完整代码 #

import pandas as pd
import plotly.express as px
import io
 
df = pd.read_csv(io.StringIO(""" num CAT GEO value1
   1     A   Ontario  40
   2     A   Quebec   20
   3     A   Manitoba 30
   4     A   Alberta  60
   1     B   Ontario  35
   2     B   Quebec   10
   3     B   Manitoba 20
   4     B   Alberta  10"""), sep="\s+")
 
# 按GEO排序，保证数据顺序和trace顺序一致
dfA = df[df['CAT']=='A'].sort_values('GEO')
dfB = df[df['CAT']=='B'].sort_values('GEO')
 
fig = px.bar(dfA, 
             x = 'GEO', 
             y = 'value1',
             color = 'GEO',
             height = 400, 
             width = 700)

# 提取初始图表中每个GEO对应的颜色
colors = [trace.marker.color for trace in fig.data]
 
updatemenus = [{
                'buttons': [{'method': 'update',
                             'label': 'Select: A or B',
                             'args': [{'y': dfA['value1'].tolist(),
                                       'marker.color': colors},  # 添加颜色参数
                                      {'title':'A'},
                                      ],
                             'args2': [{'y': dfB['value1'].tolist(),
                                       'marker.color': colors},  # 复用颜色列表
                                       {'title':'B'},
                                      ]
                              },
                            ],
                'type':'buttons',
                'direction': 'down',
                'showactive': True,}]
 
fig.update_layout(updatemenus = updatemenus)
fig.show()

解释 #

• 排序数据：px.bar按color='GEO'生成trace时，会按GEO的默认排序创建每个条形，提前对dfA和dfB排序，能确保切换时每个位置的条形对应同一个GEO；
• 复用颜色：初始图表已为每个GEO分配唯一颜色，提取后在切换时传入marker.color，就能让每个GEO的条形颜色保持固定，不会随切换变化。

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