html Python Dash：在网格的一行中拟合表格和图形

rryofs0p 于 2023-04-18 发布在 Python

关注(0)|答案(1)|浏览(127)

我试图将一个表格和一个图形放在一个网格的一行中。我试图通过设置style来调整它们的大小，但由于一些奇怪的原因，表格被放置在图形下面。
这是代码。它是由什么引起的？

from dash import Dash, dcc, html, Input, Output, no_update, dash_table
import plotly.express as px
import dash_bootstrap_components as dbc
import plotly.graph_objects as go
import pandas as pd
from collections import OrderedDict

app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

data = OrderedDict(
    [
        ("Date", ["2015-01-01", "2015-10-24", "2016-05-10", "2017-01-10", "2018-05-10", "2018-08-15"]),
        ("Region", ["Montreal", "Toronto", "New York City", "Miami", "San Francisco", "London"]),
        ("Temperature", [1, -20, 3.512, 4, 10423, -441.2]),
        ("Humidity", [10, 20, 30, 40, 50, 60]),
        ("Pressure", [2, 10924, 3912, -10, 3591.2, 15]),
    ]
)
df_a = pd.DataFrame(OrderedDict([(name, col_data * 10) for (name, col_data) in data.items()]))
df_a = df_a.iloc[0:20].copy()

df_b = px.data.gapminder().query("year == 2007")

dropdown_country_a = dcc.Dropdown(
    id="dropdown-a",
    options=df_b.country,
    value="Turkey",
)

dropdown_country_b = dcc.Dropdown(
    id="dropdown-b",
    options=df_b.country,
    value="Canada"
)

f1 = go.Figure(go.Bar(x=["a", "b", "c"], y=[2, 3, 1], marker_color="Gold"))
f2 = go.Figure(go.Bar(x=["a", "b", "c"], y=[2, 3, 1], marker_color="Gold"))
f3 = go.Figure(go.Bar(x=["a", "b", "c"], y=[2, 3, 1], marker_color="Gold"))

aa = {'width': '40%', 'display': 'inline-block'}

app.layout = html.Div([
    html.H1("USD", style={'textAlign': 'center'}),
    html.Div(children=[
        html.Div([dcc.Graph(id="1", figure=f1, style=aa), dcc.Graph(id="2", figure=f2, style=aa)]),
        html.Div([
        
        html.Div([
        dash_table.DataTable(id="table", data=df_a.to_dict('records'), columns=[{"name": i, "id": i} for i in df_a.columns])], style=aa),
        
        html.Div([dbc.Container([
            dbc.Row(dbc.Col([dropdown_country_a, dropdown_country_b], lg=6, sm=12)),
            dbc.Row(dbc.Col(dcc.Graph(id="asd"), lg=6, sm=12))])], style=aa)
    ])
    ])
])


# Callback for line_geo graph
@app.callback(
    Output("asd", "figure"),
    Input("dropdown-a", "value"),
    Input("dropdown-b", "value"),
)
def make_line_geo_graph(country_a, country_b):
    dff = df_b[df_b.country.isin([country_a, country_b])]

    fig = px.line_geo(
        dff,
        locations="iso_alpha",
        projection="orthographic",
    )

    fig_locations = px.line_geo(
        dff, locations="iso_alpha", projection="orthographic", fitbounds="locations"
    )

    fig.update_traces(
        line_width=3,
        line_color="red",
    )

    fig_locations.update_traces(
        line_width=3,
        line_color="red",
    )

    return fig

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

来源：https://stackoverflow.com/questions/76006269/python-dash-fitting-a-table-and-a-graph-in-one-row-of-a-grid

1条答案

按热度按时间

为了更好地控制达世币应用程序的组件，您应该考虑在dbc.Row()组件中使用dbc.Col组件。如果您交换您的：

app.layout = html.Div([
    html.H1("USD", style={'textAlign': 'center'}),
    html.Div(children=[
        html.Div([dcc.Graph(id="1", figure=f1, style=aa),
                 dcc.Graph(id="2", figure=f2, style=aa)]),
        html.Div([

            html.Div([
                dash_table.DataTable(id="table", data=df_a.to_dict('records'), columns=[{"name": i, "id": i} for i in df_a.columns])], style=aa),

            html.Div([dbc.Container([
                dbc.Row(
                    dbc.Col([dropdown_country_a, dropdown_country_b], lg=6, sm=12)),
                dbc.Row(dbc.Col(dcc.Graph(id="asd"), lg=6, sm=12))])], style=aa)
        ])
    ])
])

有：

app.layout = html.Div([
    html.H1("USD", style={'textAlign': 'center'}),
    html.Div(children=[
        html.Div([dcc.Graph(id="1", figure=f1, style=aa),
                 dcc.Graph(id="2", figure=f2, style=aa)]),
        dbc.Row([dbc.Col([dropdown_country_a, dropdown_country_b], lg=6, sm=12)]),
        dbc.Row([dbc.Col([dash_table.DataTable(id="table", data=df_a.to_dict(
            'records'), columns=[{"name": i, "id": i} for i in df_a.columns])]), dbc.Col([dcc.Graph(id="asd")])])

    ])
])

然后，您将获得以下设置：

在这里，您可以使用dbc.Col组件的width属性调整应用的布局。

完整代码：

from dash import Dash, dcc, html, Input, Output, no_update, dash_table
import plotly.express as px
import dash_bootstrap_components as dbc
import plotly.graph_objects as go
import pandas as pd
from collections import OrderedDict

app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

data = OrderedDict(
    [
        ("Date", ["2015-01-01", "2015-10-24", "2016-05-10",
         "2017-01-10", "2018-05-10", "2018-08-15"]),
        ("Region", ["Montreal", "Toronto", "New York City",
         "Miami", "San Francisco", "London"]),
        ("Temperature", [1, -20, 3.512, 4, 10423, -441.2]),
        ("Humidity", [10, 20, 30, 40, 50, 60]),
        ("Pressure", [2, 10924, 3912, -10, 3591.2, 15]),
    ]
)
df_a = pd.DataFrame(OrderedDict([(name, col_data * 10)
                    for (name, col_data) in data.items()]))
df_a = df_a.iloc[0:20].copy()

df_b = px.data.gapminder().query("year == 2007")

dropdown_country_a = dcc.Dropdown(
    id="dropdown-a",
    options=df_b.country,
    value="Turkey",
)

dropdown_country_b = dcc.Dropdown(
    id="dropdown-b",
    options=df_b.country,
    value="Canada"
)

f1 = go.Figure(go.Bar(x=["a", "b", "c"], y=[2, 3, 1], marker_color="Gold"))
f2 = go.Figure(go.Bar(x=["a", "b", "c"], y=[2, 3, 1], marker_color="Gold"))
f3 = go.Figure(go.Bar(x=["a", "b", "c"], y=[2, 3, 1], marker_color="Gold"))

aa = {'width': '40%', 'display': 'inline-block'}

# app.layout = html.Div([
#     html.H1("USD", style={'textAlign': 'center'}),
#     html.Div(children=[
#         html.Div([dcc.Graph(id="1", figure=f1, style=aa),
#                  dcc.Graph(id="2", figure=f2, style=aa)]),
#         html.Div([

#             html.Div([
#                 dash_table.DataTable(id="table", data=df_a.to_dict('records'), columns=[{"name": i, "id": i} for i in df_a.columns])], style=aa),

#             html.Div([dbc.Container([
#                 dbc.Row(
#                     dbc.Col([dropdown_country_a, dropdown_country_b], lg=6, sm=12)),
#                 dbc.Row(dbc.Col(dcc.Graph(id="asd"), lg=6, sm=12))])], style=aa)
#         ])
#     ])
# ])

app.layout = html.Div([
    html.H1("USD", style={'textAlign': 'center'}),
    html.Div(children=[
        html.Div([dcc.Graph(id="1", figure=f1, style=aa),
                 dcc.Graph(id="2", figure=f2, style=aa)]),
        dbc.Row([dbc.Col([dropdown_country_a, dropdown_country_b], lg=6, sm=12)]),
        dbc.Row([dbc.Col([dash_table.DataTable(id="table", data=df_a.to_dict(
            'records'), columns=[{"name": i, "id": i} for i in df_a.columns])]), dbc.Col([dcc.Graph(id="asd")])])

    ])
])

# Callback for line_geo graph
@app.callback(
    Output("asd", "figure"),
    Input("dropdown-a", "value"),
    Input("dropdown-b", "value"),
)
def make_line_geo_graph(country_a, country_b):
    dff = df_b[df_b.country.isin([country_a, country_b])]

    fig = px.line_geo(
        dff,
        locations="iso_alpha",
        projection="orthographic",
    )

    fig_locations = px.line_geo(
        dff, locations="iso_alpha", projection="orthographic", fitbounds="locations"
    )

    fig.update_traces(
        line_width=3,
        line_color="red",
    )

    fig_locations.update_traces(
        line_width=3,
        line_color="red",
    )

    return fig

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

赞(0）回复(0）举报 2023-04-18

相关问题

热门标签

Java query python Node 开发语言 request Util 数据库 Table 后端算法 Logger Message Element Parser

最新问答

xxl-job 安全组扫描到执行器端口服务存在信息泄露漏洞
回答(1) 发布于 4个月前
xxl-job 不能和nacos兼容？
回答(3) 发布于 4个月前
xxl-job 任务执行完后无法结束，日志一直转圈
回答(3) 发布于 4个月前
xxl-job-admin页面上查看调度日志样式问题
回答(1) 发布于 4个月前
xxl-job 参数512字符限制能否去掉
回答(1) 发布于 4个月前