如何使用 Python 调整 Dash 中图形的大小？答案

【问题标题】：How to Adjust the size of graphs in Dash with Python?如何使用 Python 调整 Dash 中图形的大小？
【发布时间】：2020-05-29 22:11:30
【问题描述】：

目标是最大化每个位置卡的饼图视图。如下图可以看出，饼图很小，不能很好的贴合每个地方卡片的窗口。

OP1 提出了一些解决方法，但我无法正确重现它。

如果有人能阐明如何解决这个问题，不胜感激。

重现上图的代码是：

import dash
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Input, Output
import dash_bootstrap_components as dbc
import plotly.graph_objs as go

app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
app.config.suppress_callback_exceptions = True

labels = [['monkeys', 'elephants'],
          ['birds', 'dinosaurs'],
          ['unicorns', 'giraffes']]

values = [[50, 40],
          [100, 10],
          [100, 20]]
data = []
for label, value in zip(labels, values):
    data.append(html.Div([dcc.Graph(figure={'data': [go.Pie(labels=label,
                                                            values=value,
                                                            hoverinfo='label+value+percent', textinfo='value'
                                                            )]})
                          ], className='col-sm-4'))

labels_second = [['Human', 'Animal']]
values_second = [[40, 60]]
data_second = []
for label, value in zip(labels_second, values_second):
    data_second.append(html.Div([dcc.Graph(figure={'data': [go.Pie(labels=label,
                                                                   values=value,
                                                                   hoverinfo='label+value+percent', textinfo='value'
                                                                   )]})
                                 ], className='col-sm-4'))


def color_font():
    selected_color = 'yellow'
    style = {'textAlign': 'center', 'background': selected_color}
    return style


def second_row():
    return html.Div(className='four columns div-user-controls',
                    children=[
                        html.H2('Second Row', style=color_font()),
                        html.P('Display data Left')])


def multiple_rows():
    return html.Div(className='rowxxx',
                    children=[
                        second_row(),
                        second_row(),

                        # my_tab(),
                        # html.Div(id='tabs-example-content')
                    ])


def pie_chart_side_by_side():
    return html.Div(data, className='row')


def pie_chart_single():
    return html.Div(data_second, className='row')


def multiple_columns():
    """
    Testing multiple column
    """
    return dbc.Row(
        [
            dbc.Col(multiple_rows(), width=1),
            dbc.Col(pie_chart_single()),
            dbc.Col(pie_chart_side_by_side()),
        ], no_gutters=True,  # Disable spacing between column
    )


app.layout = html.Div(
    children=[
        multiple_columns(),
    ]

)


# Callback for
@app.callback(Output('tabs-example-content', 'children'),
              [Input('tabs-example', 'value')])
def render_content(tab):
    if tab == 'tab-1':
        return html.Div([
            html.H3('Tab content 1')
        ])
    elif tab == 'tab-2':
        return html.Div([
            html.H3('Tab content 2')
        ])
    elif tab == 'tab-3':
        return html.Div([
            html.H3('Tab content 3')
        ])


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

【问题讨论】：

标签： python plotly plotly-dash

【解决方案1】：

参数样式负责调整绘图大小。

例如，

style={"height": "50%", "width": "40%"}

style 可以合并如下，

html.Div(html.Div([dcc.Graph(figure = {'data': [go.Pie(labels=['Human', 'Animal', 'Alien'],
                              values=[40, 59.1, 0.9],
                              title='Trend',
                              showlegend=False,
                              hoverinfo='label+value+percent', textinfo='value')]}
                                        )
                              ], style={"height": "60%", "width": "80%"}))

这会产生类似于以下附件的内容；

【讨论】：