Plotly Dash：不能并排放置图形和表格答案

【问题标题】：Plotly Dash: Cannot place figure and table side by sidePlotly Dash：不能并排放置图形和表格
【发布时间】：2021-11-07 16:37:02
【问题描述】：

我正在尝试并排放置一个图形和一个表格，但该表格始终垂直显示在图形下方，尽管它水平放置在正确的位置。如果两个元素都是数字，类似的代码对我有用。这是一个最小的代码示例。

fig = make_subplots()
fig.add_trace(go.Scatter(x = [1,2,3], y = [1,2,3]))
df = pd.DataFrame({'col1': [1, 2, 3], 'col2': ['This is a test ', 'This is a test', 'This is a test'], 'col3': [99, 100, 101]})

app = dash.Dash(__name__)

app.layout = html.Div([
    html.Div([dcc.Graph(figure = fig)], style = {'width': '49%', 'display': 'inline-block'}),
    html.Div([dt.DataTable(
        data=df.to_dict('records'),
        columns=[{'id': c, 'name': c} for c in df.columns],
        style_table = {'height': 200, 'overflowX': 'auto'})], style = {'width': '49%', 'display': 'inline-block'}),
])

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

这是我得到的图像：

【问题讨论】：

标签： python plotly-dash

【解决方案1】：

尝试在flex container 中包含图形和表格，即html.Div() 和style={'display': 'flex'}。

import pandas as pd
import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_table as dt
import plotly.graph_objects as go

app = dash.Dash(__name__)

app.layout = html.Div([

    # Flex container
    html.Div([

        # Graph container
        html.Div([

            dcc.Graph(figure=go.Figure(data=go.Scatter(x=[1, 2, 3], y=[1, 2, 3]), layout=dict(margin=dict(t=0, b=0, l=0, r=0))))

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

        # Table container
        html.Div([

            dt.DataTable(
                data=pd.DataFrame({'col1': [1, 2, 3], 'col2': [99, 100, 101]}).to_dict('records'),
                columns=[{'id': c, 'name': c} for c in ['col1', 'col2']],
                style_table={'height': 200, 'overflowX': 'auto'}
            )

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

    ], style={'display': 'flex'}),

])

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

【讨论】：