如何在Plotly分组柱状图中为每组最大值设置加粗样式？

问题描述 #

使用Plotly Express生成了如下分组柱状图并在Streamlit中展示：

import plotly.express as px
import streamlit as st

# 假设df_to_print和metric已定义
fig = px.bar(df_to_print, x="bin_dist", y=metric, color='net_id',  barmode="group", text=metric, color_discrete_sequence=px.colors.qualitative.Vivid)
st.plotly_chart(fig)

现在需要将每组（每个bin_dist对应的分组）中的最大值文本设置为加粗样式。

解决方案 #

要实现这个效果，需要手动遍历图表数据，找出每组的最大值，再对对应文本添加加粗格式，具体步骤如下：

1. 按bin_dist分组，计算每组的最大值
2. 遍历原始数据，为每个值判断是否属于对应组的最大值，若是则用<b>标签包裹文本
3. 更新图表的text属性，同时设置texttemplate支持HTML格式

完整代码示例：

import plotly.express as px
import pandas as pd
import streamlit as st

# 示例数据（可替换为你的df_to_print）
df_to_print = pd.DataFrame({
    "bin_dist": ["A", "A", "B", "B", "C", "C"],
    "net_id": ["X", "Y", "X", "Y", "X", "Y"],
    "value": [10, 15, 8, 12, 20, 18]
})
metric = "value"

# 生成基础柱状图
fig = px.bar(df_to_print, x="bin_dist", y=metric, color='net_id',  barmode="group", text=metric, color_discrete_sequence=px.colors.qualitative.Vivid)

# 1. 计算每组的最大值
group_max = df_to_print.groupby("bin_dist")[metric].max().reset_index()
max_dict = dict(zip(group_max["bin_dist"], group_max[metric]))

# 2. 生成带加粗格式的文本列表
formatted_text = []
for idx, row in df_to_print.iterrows():
    if row[metric] == max_dict[row["bin_dist"]]:
        formatted_text.append(f"<b>{row[metric]}</b>")
    else:
        formatted_text.append(str(row[metric]))

# 3. 更新图表文本属性，开启HTML支持
fig.update_traces(text=formatted_text, texttemplate="%{text}", textposition="outside")

# 在Streamlit中展示
st.plotly_chart(fig)

代码说明 #

• group_max通过分组聚合得到每个bin_dist组的最大值，并存为字典方便快速查找
• formatted_text遍历每条数据，判断当前值是否为对应组的最大值，是则用<b>标签包裹
• update_traces更新图表的文本内容，同时设置texttemplate确保HTML格式被解析

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