如何在Dash Web应用程序中修复绘图图形大小

时间:2020-08-15 23:34:13

标签: python plotly plotly-dash

我正在尝试在破折号应用程序中修复图形大小,以便它是所需的大小,并且在调整浏览器页面大小时不会更改。

我的图形和破折号应用程序的代码如下:

distplot = ff.create_distplot(hist_data, group_labels, bin_size=50000, show_hist=False)

distplot = distplot.update_layout(
        title_text='Kernel Density Plot of House Price Data',
        title_x=0.5,
        xaxis_showgrid=False,
        yaxis_showgrid=False,
        hoverlabel=dict(font_size=10, bgcolor='rgb(69, 95, 154)'),
        legend=dict(title='Year of data',
                    x=1,
                    y=1,
                    traceorder='normal',
                    xanchor = 'auto')
)


#Dash application

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

##Creating Dash server ##
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.config.suppress_callback_exceptions=True



url_bar_and_content_div = html.Div([
    dcc.Location(id='url', refresh=False),
    html.Div(id='page-content', style={'font': 'Georgia, sans-serif'})
                                ]
)

layout_index = html.Div([
    html.H1('Webpage Information', style={'textAlign': 'center'}),

    html.H2('Distplot', style={'font-size': '40px'}),

    html.Br(),

    dcc.Graph(id='distplot', figure=distplot),

],
    style={'margin-top': '20px', 'margin-bottom': '20px',
            'margin-right': '80px',  'margin-left': '80px'}
)


## Creating HTML style ##
# index layout
app.layout = url_bar_and_content_div

# "complete" layout
app.validation_layout = html.Div([
    url_bar_and_content_div,
    layout_index
])
# Index callbacks
@app.callback(Output('page-content', 'children'),
          [Input('url', 'pathname')])
def display_page(pathname):
    return layout_index

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

我尝试了几种方法来实现此目的,首先将图形放在自己的html.Div()中,然后使用style{'height' : '700', 'width' : '700' },但它没有用。我尝试将style直接用于dcc.Graph对象,但这也没有用。

有人知道我会怎么做吗?谢谢

编辑 现在,我可以在height=700方法中使用.update_layout()来正确设置图形高度的大小。但是,调整我的浏览窗口大小时,图形会重新缩放并错误地将大小更改为浏览器窗口大小。

如果有人知道该怎么做,将不胜感激。

0 个答案:

没有答案