Plotly Dash 不能将 div 放在同一行

Posted 2023-03-22

【中文标题】Plotly Dash 不能将 div 放在同一行

【英文标题】：Plotly Dash Can't Put div in the Same Row

【发布时间】：2019-02-11 07:11:02

【问题描述】：

在 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】：

您是否尝试过使用 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',
            )
        ],

通常，这应该根据您想要的方式更新页面。