Plotly Go饼图单个切片左侧边框颜色异常问题求助

问题根源 #

你遇到的是Plotly饼图的渲染特性：当使用pull参数让切片分离时，第一个切片的左侧边框会与最后一个切片的右侧边框重叠，这段重叠区域会采用最后一个切片的边框颜色，导致视觉上第一个切片左侧边框颜色和自身不一致。

解决方案 #

通过调整边框颜色列表，让最后一个切片的边框颜色与第一个切片一致，即可消除这个异常：

labels = [f"{total_servicecount[key]} {key.capitalize()}" for key in total_servicecount.keys()]
values = list(total_servicecount.values())

service_colours = {
    'ok': '#173928',
    'warning': '#3E3B16',
    'critical': '#502428',
    'unknown': '#262730',
    'pending': '#28b7e2' 
}

service_colours_bg = {
    'ok': '#35e916',
    'warning': '#FFA500',
    'critical': '#FF0000',
    'unknown': '#808080',
    'pending': '#28b7e2' 
}

# 提取边框颜色列表，并将第一个颜色追加到末尾
border_colors = list(service_colours_bg.values())
border_colors.append(border_colors[0])

fig = go.Figure(data=[go.Pie(
    labels=labels,
    values=values,
    hole=0.7,
    marker=dict(
        colors=list(service_colours.values()),
        line=dict(
            color=border_colors,  # 使用修改后的边框颜色列表
            width=2
        ),
        pattern=dict(
            bgcolor=list(service_colours_bg.values())
        )
    ),
    pull=[0.01] * len(values),
    hoverinfo='label+percent',
    textinfo='none',
    hovertemplate="<b>%{label}</b><br>Count: %{value}<br>Percentage: %{percent}<extra></extra>",
    domain=dict(x=[0, 1], y=[0, 1]),
    opacity=1                      
)])

fig.update_layout(
    showlegend=False,
    height=200,
    width=190,
    margin=dict(l=0, r=5, t=5, b=5),
    legend=dict(
        orientation='h',
        xanchor='center',
        yanchor='bottom',
        x=0.2,
        y=-0.4
    ),
    annotations=[dict(text='<b>Service<br>Status</b>', x=0.5, y=0.5, font_size=18, showarrow=False)]
)

st.plotly_chart(fig, use_container_width=False)

替代方案 #

如果不需要切片分离效果，可以直接移除pull=[0.01] * len(values)参数，让切片紧密连接，此时边框重叠问题会被隐藏，视觉上显示正常。

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