Plotly饼图外部文本超边界，如何生成带滚动条的完整显示图像？

当饼图类别多达100个时，外部文本溢出是因为默认图表容器的空间不足以容纳所有文本。要实现带滚动条的完整显示，有两种可行方法：

方法一：用Dash快速搭建带滚动条的交互式页面 #

Dash是Plotly官方的Web框架，可以轻松给图表加上滚动容器：

import plotly.express as px
import pandas as pd
import dash
from dash import html, dcc

# 生成数据
allData = []
for i in range(100):
    ele = {'Category': f"Category_{i}", 'number': i+1}
    allData.append(ele)
df = pd.DataFrame(allData)

# 创建饼图
fig = px.pie(names=df['Category'], values=df['number'], hole=0.5)
fig.update_traces(textinfo='label+value', textposition="outside")
# 适当调整文本大小，平衡可读性和空间
fig.update_traces(textfont={'size': 10})

# 初始化Dash应用
app = dash.Dash(__name__)

# 布局：用Div设置固定高度和滚动属性
app.layout = html.Div([
    dcc.Graph(figure=fig)
], style={'height': '800px', 'overflow-y': 'scroll', 'width': '100%'})

if __name__ == '__main__':
    app.run_server(debug=True)

运行后打开本地服务器地址，就能看到带垂直滚动条的页面，拖动滚动条即可完整查看所有外部文本，同时保持字体清晰。

方法二：生成带滚动容器的静态HTML文件 #

如果不需要交互式后端，直接生成HTML文件也能实现：

import plotly.express as px
import pandas as pd

# 生成数据和饼图
allData = []
for i in range(100):
    ele = {'Category': f"Category_{i}", 'number': i+1}
    allData.append(ele)
df = pd.DataFrame(allData)

fig = px.pie(names=df['Category'], values=df['number'], hole=0.5)
fig.update_traces(textinfo='label+value', textposition="outside")
fig.update_traces(textfont={'size': 10})

# 生成带滚动容器的HTML代码
html_template = f"""
<!DOCTYPE html>
<html>
<head>
    <title>Pie Chart with Scroll</title>
</head>
<body>
    <div style="height: 800px; overflow-y: scroll; width: 100%;">
        {fig.to_html(full_html=False)}
    </div>
</body>
</html>
"""

# 保存为HTML文件
with open('scrollable_pie_chart.html', 'w', encoding='utf-8') as f:
    f.write(html_template)

运行后打开生成的scrollable_pie_chart.html文件，就能看到带滚动条的饼图。

额外优化建议 #

• 调整textfont.size：根据实际需求调整字体大小，在可读性和空间之间找平衡；
• 调整图表边距：用fig.update_layout(margin={'l': 50, 'r': 50, 't': 50, 'b': 50})给文本留出更多空间；
• 合并极小占比类别：如果部分类别占比极低，可合并为“其他”类别，减少文本数量，提升整体可读性。

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