Заговор черты не может поместить div в той же строке - PullRequest
0 голосов
/ 06 сентября 2018

На панели инструментов Plotly Dash я не могу растянуть графики по мере роста экрана, а затем становиться рядом в одном ряду, когда экран становится достаточно большим. Если я использую style = {"float: right"} и style = {"float: left"} с каждым графиком, он будет работать, но графики больше не будут растягиваться вместе с экраном. Я приложил фото полученных участков. Участки больше / меньше. Я хочу, чтобы они располагались рядом с большим окном браузера, а затем сжимались с окном среднего браузера и переворачивались с небольшим окном браузера.

app = dash.Dash()

app.layout = html.Div([
        dcc.Checklist(
        id='input',
        options=[
            {'label': 'Astoria', 'value': 'AST'},
            {'label': 'Warrenton', 'value': 'WAR'},
            {'label': 'Seaside', 'value': 'SEA'}
        ],
        values=['AST', 'WAR', 'SEA'],
    ),
    html.Div(className='row',
             children=[
        html.Div(
            dcc.Graph(id='value-index'),
            className='col s12 m6', 
            ),
        html.Div(
            dcc.Graph(id='rental-index'),
            className='col s12 m6',
            )
        ],

    )


])


@app.callback(
    Output('value-index', 'figure'),
    [Input(component_id='input', component_property='values')]
    )

def update_graph(input_data):

    return  {
            'data': [
                {'x': astoriaValueIndex.index, 'y': astoriaValueIndex.Value, 'type': 'line', 'name': 'Astoria'},
                {'x': warrentonValueIndex.index, 'y': warrentonValueIndex.Value, 'type': 'line', 'name': 'Warrenton'},
                {'x': seasideValueIndex.index, 'y': seasideValueIndex.Value, 'type': 'line', 'name': 'Seaside'},
            ],
            'layout': {
                'title': 'Zillow Value Index'
            }
        }


@app.callback(
    Output('rental-index', 'figure'),
    [Input(component_id='input', component_property='values')]
    )

def update_graph(input_data):

    return {
            'data': [
                {'x': astoriaRentalIndex.index, 'y': astoriaRentalIndex.Value, 'type': 'line', 'name': 'Astoria'},
                {'x': warrentonRentalIndex.index, 'y': warrentonRentalIndex.Value, 'type': 'line', 'name': 'Warrenton'},
                {'x': seasideRentalIndex.index, 'y': seasideRentalIndex.Value, 'type': 'line', 'name': 'Seaside'},
            ],
            'layout': {
                'title': 'Zillow Rental Index'
            }
        }
    [enter image description here][1]

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

1 Ответ

0 голосов
/ 18 января 2019

Пробовали ли вы с помощью опции CSS: display: Flex; ?

html.Div(className='row',
         style : {'display' : 'flex'},
             children=[
        html.Div(
            dcc.Graph(id='value-index'),
            className='col s12 m6',

            ),
        html.Div(
            dcc.Graph(id='rental-index'),
            className='col s12 m6',
            )
        ],

Обычно это должно обновлять страницу в соответствии с вашими предпочтениями.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...