Как настроить размер графиков в Da sh с Python? - PullRequest
Новая
       73

Как настроить размер графиков в Da sh с Python?

0 голосов
/ 29 мая 2020

Цель состоит в том, чтобы максимизировать обзор диаграммы p ie на каждой карточке места. Как видно на рисунке ниже, диаграмма p ie имеет небольшой размер и не соответствует окну каждой карточки места.

enter image description here

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)

1 Ответ

1 голос
/ 29 мая 2020

Стиль параметра отвечает за настройку размера графика.

Например, 

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

Что производит что-то вроде прикрепленного ниже приложения; enter image description here

...