Python Dash: 将表格和图表放入网格的一行中

huangapple
go评论87阅读模式
英文:

Python Dash: Fitting a table and a graph in one row of a grid

问题

以下是您提供的代码的翻译部分：

我正在尝试将表格和图形放在网格的同一行中。我已经尝试通过设置 `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)

希望这有助于您理解代码中的内容。如果您有任何进一步的问题，请随时提出。

英文:

I am trying to fit a table and a graph in one single row of a grid. I have tried to resize both of them to fit by setting the style, but for some odd reason the table is placed beneath the graph.

Here is the code. What is it caused by?

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)

答案1

得分: 3

以下是您要翻译的代码部分：

For better control of the components of your Dash app, you should consider using `dbc.Col` components within `dbc.Row()` components. If you exchange your:

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)
        ])
    ])
])

With:

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")])])

    ])
])

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

Python Dash: 将表格和图表放入网格的一行中

从这里，您可以使用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)]),
        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)

希望这对您有所帮助！

英文:

For better control of the components of your Dash app, you should consider using dbc.Col components within dbc.Row() components. If you exchange your:

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)
])
])
])

With:

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")])])
])
])

Then you'll get the following setup:

Python Dash: 将表格和图表放入网格的一行中

From here you can tweak the layout of your app with the width attribute of your dbc.Col components.

Complete code:

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)

huangapple
  • 本文由 发表于 2023年4月13日 21:52:22
  • 转载请务必保留本文链接：https://go.coder-hub.com/76006269.html
  • dashboard
  • html
  • plotly
  • plotly-dash
  • python
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定