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

Question

目的是最大化每个位置卡上的饼图视图。如下图所示，饼图很小，不适合每个位置卡片的窗口。

[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)

Answer 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%"}))

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