关于使用CSV、Pandas与Plotly/Dash创建指定样式可滚动横向条形图的技术咨询

我太懂你现在的困扰了——几千条横向条形挤在一起，每次新增数据还越变越窄，想滚动浏览的时候每个条形都能保持固定的舒服高度，不会被压缩得像细线一样，对吧？

你目前的代码里，给figure设置了固定的height:2500，但如果你的数据有几千条，这个高度根本装不下所有条形，Plotly就会自动压缩每个条形的高度来强行填满这个固定高度，这就是为什么条形会越来越小的原因。外层的滚动设置是对的，但图形高度没跟你的数据量挂钩，才会出现这个问题。

要实现你想要的效果——滚动时每个条形高度不变，核心就是根据数据的条数动态计算图形的总高度，让图形本身有足够的空间容纳所有条形，不会被压缩，然后外层div保持固定高度来实现滚动。具体修改后的代码如下：

import pandas as pd
import plotly.graph_objects as go
from dash import Dash, html, dcc

# Load data from CSV
csv_file = 'prices.csv'
df = pd.read_csv(csv_file)

# 关键修改：动态计算图形总高度
# 每条条形分配固定高度（这里设为30px，可根据需求调整）
bar_height = 30
# 额外高度：留给标题、轴标签、边距等
extra_height = 200
# 总图形高度 = 条形数量 * 单条高度 + 额外高度
figure_total_height = len(df) * bar_height + extra_height

# Create the Dash app
app = Dash(__name__)

# Define the layout of the app
app.layout = html.Div(
    [
        dcc.Graph(
            figure=go.Figure(
                data=[go.Bar(y=df['price'], x=df['list'], orientation='h')],
                layout={
                    'height': figure_total_height,  # 用动态计算的高度
                    'autosize': False,  # 关闭自动调整，强制使用我们设置的高度
                    'margin': dict(l=150, r=50, t=50, b=50)  # 调整边距避免内容被截断
                }
            )
        ),
    ],
    style={
        'overflow-y': 'auto',
        'height': 800  # 固定外层滚动区域的高度，保持不变
    }
)

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

关键修改说明 #

• 动态计算高度：根据你的数据条数len(df)乘以每条条形的固定高度，再加上额外的边距/标题高度，确保图形有足够空间放下所有条形，不会被压缩
• 关闭autosize=False：强制Plotly使用我们设置的高度，避免自动调整布局压缩条形
• 调整边距：避免条形的标签或者内容被容器截断，让显示更完整

额外优化建议 #

• 你可以根据自己的需求调整bar_height的值（比如改成25或35），找到最舒服的显示效果
• 如果y轴的标签太长导致重叠，可以调整layout里的l（左边距）值，或者缩小标签字体大小：yaxis={'tickfont': {'size': 10}}
• 如果不需要y轴的某些元素，可以隐藏它们来节省空间，比如yaxis={'showticklabels': False}

内容来源于stack exchange