为什么在Dash-Plotly App中我的地图尺寸太小？

Question

我正在使用称为dash的python库并按图创建一个交互式仪表板。我想设置地图大小以使其充满整个Div。该地图是使用mapbox创建的。我试图设置样式，但是没有用。 我的地图如下所示：

我注意到其他人的地图充满了整个Div。 （请参见小部件的位置）：

这是我的代码：

map_data = [
    go.Scattermapbox(
        lat=df['latitude'],
        lon=df['longitude'],
        mode='markers',
        marker=dict(
            cmax=50,
            cmin=0,
            color=df['depth'],
            colorbar=dict(
                title='Colorbar'
            ),
            colorscale='YlGnBu',
            reversescale=True,
            size=5,
            # opacity=0.9
        ),

        text=df['depth'],
        hoverinfo='text'
    )
]

map_layout = go.Layout(
    title='Bathymetrical Data',
    autosize=True,
    hovermode='closest',
    xaxis=dict(hoverformat='.5f'),
    yaxis=dict(hoverformat='.5f'),

    mapbox=dict(
        accesstoken=mapbox_access_token,
        bearing=0,
        center=dict(
            lat=lat,
            lon=lon
        ),
        pitch=0,
        zoom=10,
    ),
)

figure = {
    'data': map_data,
    'layout': map_layout
}

有人知道我可以如何更改代码以使地图看起来像这样吗？

Answer 1

我认为您追求的是布局边距：

map_layout = go.Layout(
    title='Bathymetrical Data',
    autosize=True,
    hovermode='closest',
    margin=dict(t=0, b=0, l=0, r=0),
    ...

请注意，这些边距会影响图表的“内部”，您还可以在布局中设置width和height参数以更改整个图形的大小。对于宽度，我强烈建议在此css上为破折号使用CSS网格。