如何在破折号 Web 应用程序中修复绘图大小答案

【问题标题】：How to fix plotly graph size in dash web application如何在破折号 Web 应用程序中修复绘图大小
【发布时间】：2022-01-10 15:33:14
【问题描述】：

我正在尝试在 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 对象，但这也不起作用。

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

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

如果有人知道如何做到这一点，将不胜感激。

【问题讨论】：

标签： python plotly plotly-dash

【解决方案1】：

尝试在图形创建方法中包含宽度和高度参数。

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

【讨论】：