Plotly Scattergeo无法自动扩展至画布尺寸的问题求助

问题 #

在Dash应用中创建的Plotly Scattergeo图表仅占用约1/3的屏幕空间，显式设置图表高度、宽度无效，也未发现CSS影响。灰色Scattergeo区域实际尺寸更大，但被自动生成的clipgroup裁剪，如何让图表自动扩展至整个画布（下图蓝色区域为画布）？

生成图表的代码 #

# Create a scattergeo trace with square markers
trace = go.Scattergeo(
    lat=plot['lat'],
    lon=plot['lon'],
    mode='markers+text',
    marker=dict(
        size=10,
        color='blue',
        opacity=0.7,
        symbol='square'
    ),
    text=plot['Callsign'],
    textposition='middle right',
    textfont=dict(size=8, color='white'),
    hovertemplate="<b>%{text}</b><br>" +
        "Tracknumber: %{customdata[0]}<br>" +
        "Altitude: %{customdata[1]}<br>" +
        "TAS: %{customdata[2]}<br>" +
        "Date: %{customdata[3]}",
    customdata=customdata
)
# Define the layout
layout = go.Layout(
    geo=dict(
        projection=dict(type='mercator', scale=33),
        resolution=50,
        center=dict(lat=frame["lat"], lon=frame["lon"]),
        scope='europe',
        bgcolor='black',
        showcountries=True,
        countrycolor='black',
        landcolor='gray',
        lakecolor='black',
    ),
    coloraxis_showscale=False,
    showlegend=False,
    xaxis={"title": "", "showgrid": False, "zeroline": False, "visible": False },
    yaxis={"title": "", "showgrid": False, "zeroline": False, "visible": False },
)
# Create the figure
fig = go.Figure(data=trace, layout=layout)

fig.update_layout(
    paper_bgcolor="rgba(0,0,255,1)",
    plot_bgcolor="rgba(255,0,0,0)",
    margin={"r":0,"t":0,"l":0,"b":0, "autoexpand":True},
    height=500
)

解决方案 #

1. 删除冗余的笛卡尔坐标系配置 #

Scattergeo属于地理坐标系图表，不需要xaxis和yaxis配置，这些无效配置会占用画布空间并干扰geo区域的布局。直接移除layout中的这两行：

xaxis={"title": "", "showgrid": False, "zeroline": False, "visible": False },
yaxis={"title": "", "showgrid": False, "zeroline": False, "visible": False },

2. 配置geo区域占满画布 #

在geo参数中添加domain设置，强制地理区域占满整个画布范围，同时根据需求调整投影缩放和边界适配：

geo=dict(
    projection=dict(type='mercator'),  # 若不需要固定缩放，可移除scale参数，配合fitbounds自动适配
    resolution=50,
    center=dict(lat=frame["lat"], lon=frame["lon"]),
    scope='europe',
    bgcolor='black',
    showcountries=True,
    countrycolor='black',
    landcolor='gray',
    lakecolor='black',
    fitbounds="locations",  # 可选：根据数据点自动调整边界，让所有点都显示在画布内
    domain=dict(x=[0, 1], y=[0, 1])  # 让geo区域占满整个画布的x、y范围
)

如果需要固定缩放级别，保留projection.scale参数，同时确保domain设置为[0,1]。

3. 确保Dash组件尺寸适配 #

在Dash的dcc.Graph组件中设置样式，让图表占满父容器或视口：

dcc.Graph(
    figure=fig,
    style={'width': '100%', 'height': '100vh'}  # 100vh表示占满当前视口高度，也可使用父容器的百分比
)

如果图表嵌套在其他容器中，需确保父容器也设置了正确的尺寸（如html.Div(style={'width': '100%', 'height': '100%'})）。

4. 自动消除clipgroup问题 #

clipgroup是Plotly为了限制图表显示范围自动生成的，当geo区域正确占满画布后，它的范围会自动匹配整个画布，无需手动修改。

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