Plotly：如何使用plotly-dash在一页上创建“输入文本”并在第二页或选项卡上输出（图形）？

Posted 2023-03-22

【中文标题】Plotly：如何使用plotly-dash在一页上创建“输入文本”并在第二页或选项卡上输出（图形）？

【英文标题】：Plotly: How to create 'input text' on one page and output (graphs) on second page or tab, by using plotly-dash?

【发布时间】：2021-09-18 03:06:11

【问题描述】：

我正在创建一个应用程序，其中第一页应该只接受“文本输入”，结果（图表）必须显示在第二页或新标签上。我不想在同一页面上输入文本和图表。这意味着，如果我在文本输入栏中将输入写为“美国”，则美国的图形应填充在第二个选项卡上。以下是我到目前为止以下拉格式编写的工作代码。在此代码中，下拉列表和图表位于我不想要的同一页面上。请提出建议。

import pandas as pd
import plotly.express as px
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Output, Input
import numpy as np
import plotly.io as pio
pio.renderers.default='browser'


          
app = dash.Dash(__name__)
app.layout = html.Div([
    html.H1("Economy Analysis"),
    dcc.Dropdown(id='Country_select',
                 options=['label': x, 'value': x
                 for x in df.Country.unique()],
    value = 'USA'
    ),
    dcc.Graph(id ='my-graph', figure = )
    ])

@app.callback(
    Output(component_id = 'my-graph', component_property = 'figure'),
    Input(component_id = 'Country_select', component_property = 'value'))

def interactive_graphing(value_country):
    print(value_country)
    s = 100
    cat_g = ["developing","develop"]
    sample_cat = [cat_g[np.random.randint(0,2)]for i in range(100)]
    df = pd.DataFrame("Country": np.random.choice(["USA", "JPY", "MEX", "IND", "AUS"], s),                   
              "Net": np.random.randint(5, 75, s),
        )
   df["sample_cat"] = sample_cat
   df = df[df.Country==value_country]
   df2 = df.pivot_table(index='Country',columns='sample_cat',values='Net',aggfunc='sum')
   df2.reset_index(inplace=True)

   fig = px.bar(df2, x="Country",
          y=['develop','developing'])

   return fig


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

【问题讨论】：

dash.plotly.com/dash-core-components/tabs 这是你要找的吗？

没有。我的第一个网页应该只包含“文本输入栏”，一旦我选择了值，结果应该在新浏览器中打开。

刚看到这些cmets。据我所知，Dash 不会在新的浏览器选项卡或页面中打开任何链接。您可能需要为此探索 Flask。

【参考方案1】：

您可以在布局中使用dcc.Tabs 和dcc.Tab 容器，并将输入/图形放在单独的选项卡中。 Dash 引导组件选项卡也适用于此。 id 仍将作为回调的输入/输出。

示例布局：

app.layout = html.Div([
    html.H1("Economy Analysis"),
    
    dcc.Tabs([
        dcc.Tab(
            label='Dropdown',
            children=[
                dcc.Dropdown(id='Country_select',
                             options=['label': x, 'value': x
                             for x in df.Country.unique()],
                             value = 'USA')
            ]
        ),
        dcc.Tab(
            label='Graph',
            children=[
                dcc.Graph(id ='my-graph')
            ]
        )
    ])
])