Dash中Plotly Express水平柱状图如何根据条目数自动调整高度？

直接说解决方案：Plotly的autosize=True只会让图表适配容器尺寸，不会根据数据条目数动态调整高度，你需要手动计算高度并传给图表。

具体操作步骤：

• 先获取数据的条目数量：从DataFrame的field列取长度，比如num_items = len(df['field'])
• 自定义基础高度+每条数据的增量高度，比如基础高度设250，每条数据额外加60像素（数值可以根据你的柱子宽度、字体大小自行调整）：chart_height = 250 + num_items * 60
• 要是担心数据太多导致图表过高，可加个最大高度限制：chart_height = min(250 + num_items * 60, 1000)
• 创建水平柱状图时，把计算好的高度传给height参数

示例代码：

import plotly.express as px
from dash import Dash, dcc, html

# 假设你的数据存储在df中
num_items = len(df['field'])
# 计算动态高度，可自行调整基础值和增量
chart_height = min(250 + num_items * 60, 1000)

fig = px.bar(
    df,
    y='field',
    x='对应数值列',
    orientation='h',
    height=chart_height
)

app = Dash(__name__)
app.layout = html.Div([
    dcc.Graph(figure=fig)
])

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

原理很直白：水平柱状图的每条数据对应一个纵向排布的柱子，条目越多需要的纵向空间越大，通过计算条目数动态分配高度，就能避免柱子拥挤、难以阅读的问题。

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