时间戳

首页 > 解决方案 > DataTable (inline-block) 和 Dash 中的任何 html、dcc 元素的问题

plotly - DataTable (inline-block) 和 Dash 中的任何 html、dcc 元素的问题

问题描述

我正在使用 Dash 创建具有此布局的 Web 仪表板：

app.layout = html.Div([

html.H1("DashBoard Bonos Buenos Aires", style={'text-align': 'center'}),

html.Div(
    
    className='row',
    children=[
    
        html.Div([

            html.Div([

                html.H2("Esquemas", style={'text-align': 'center'}),

                dash_table.DataTable(
                id='EsquemasBonos',
                columns=[{"name": i, "id": i} for i in Gasto.columns],
                data=Gasto.to_dict('records'), style_table={'overflowY': 'scroll'})

            ], style={'height': '300px', 'overflow': 'scroll'}),

            html.Div([

                html.H2("TablaTotal", style={'text-align': 'center'}),

                dash_table.DataTable(
                id='TablaTotal',
                columns=[{"name": i, "id": i} for i in GastoTotal.columns],
                data=GastoTotal.to_dict('records'), style_table={'overflowY': 'scroll'})

            ]),
    
            html.Br(),

    
            html.Div([

                html.H2("Tabla Full", style={'text-align': 'center'}),

                dash_table.DataTable(
                id='TablaFull',
                columns=[{"name": i, "id": i} for i in PorDriverID1.columns],
                data=PorDriverID1.to_dict('records2'), style_table={'overflowY': 'scroll'})

            ], style = {'width': '100%', 'height': '500px', 'overflow': 'scroll'}),
                
        ], style={'width': '50%', 'display': 'inline-block'}),


        html.Div([
            html.H2("Gasto por Esquema", style={'text-align': 'center'}),

            dcc.Graph(id='Gasto', figure=fig)

        ], style={'width': '50%', 'display': 'inline-block',}),

    ]),
])

我想在屏幕的一半上显示表格，在另一半上显示图表。但由于某种原因，我不明白这是输出。

图像

我希望图表和表格处于同一水平。我已经尝试过使用内联块，但我似乎无法将图形和表格放在同一“行”上。

标签： plotlydashboardplotly-dash

解决方案

我也遇到了这个问题，在保存表格的 HTML div 中使用“style={'overflow':'auto'}”为我修复了它。

推荐阅读