Plotly-dash - 更新选项卡中的图表

Question

我喜欢将graph1 放在tab1 中，graph2 放在tab 2 中，但是看不到任何痕迹。

为什么看不到痕迹？

tab2 中的图表也没有显示任何痕迹。

很高兴知道出了什么问题。 类似的示例代码也会有很大帮助。 非常感谢

''' import pandas as pd 将 numpy 导入为 np 将 plotly.express 导入为 px 导入破折号 将 dash_core_components 导入为 dcc 将 dash_html_components 导入为 html 从 dash.dependencies 导入输入、输出 导入 plotly.graph_objs 导入请求 将 dash_bootstrap_components 导入为 dbc

df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv')

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

#fig1 = px.line(title='title1')
#fig2 = px.line(title='title2')

app.layout = dbc.Container(fluid=True, children=[
html.H1('Title',id="Titel",className='ml-1',style={'text-align': 'center', 'font-weight': 'bold', 'text-decoration': 'underline'}),
## Body
dbc.Row([
    dbc.Col(md=6,children=[

            html.Br(),html.Br(),

                    dbc.Col(md=9, children=[
                    dbc.Col(html.H4("graphs in tabs"), width={"size":6,"offset":3}),
                        dbc.Tabs(className="nav nav-pills", children=[
                                dbc.Tab(dcc.Graph(id="grafiek1"), label="tab1"),
                                dbc.Tab(dcc.Graph(id="grafiek2"), label="tab2")
                                ])
                    ])

    #html.Div(id="tab-content", className="mx-auto"),  #m=marge    p=padding  0-5 of auto   vb: P-4


                           ]),  # einde kolom 1

    dbc.Col(md=6,children=[


                           ]),  # einde kolom 2


            ]), #einde rij

])
#,style={"background-image": 'url(image)'})


@app.callback(
    Output("grafiek1", "figure"),
    [Input("tabs", "active_tab")])

def tab_content(active_tab):

    if active_tab is not None:
        if active_tab == "tab1":

            fig1 = go.Figure()
           fig.add_trace(go.Scatter(x=df['Date'], y=df['AAPL.Low'], mode='markers', name='data', line={"color":"black"}))
               ## add slider
            fig.update_xaxes(rangeslider_visible=True)
        ## set background color
           fig.update_layout(plot_bgcolor='white', autosize=False, width=1000, height=550)

           return fig1

@app.callback(
    Output("grafiek2", "figure"),
    [Input("tabs", "active_tab")])

 def tab_content(active_tab):

     if active_tab is not None:
       if active_tab == "tab2":
           fig2 = go.Figure()
           fig.add_trace(go.Scatter(x=df['Date'], y=df['AAPL.High'], mode='markers', name='data', line={"color":"black"}))
            ## add slider
           fig.update_xaxes(rangeslider_visible=True)
           ## set background color
           fig.update_layout(plot_bgcolor='white', autosize=False, width=1000, height=550)

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

'''

Answer 1

您在回调中引用的'tabs' id 在您的布局中不存在。 Dash 不会告诉你这件事，因为你这样做了

app.run_server(debug='True')

而不是

app.run_server(debug=True)

您还检查active_tab 在第一个回调中是否等于"tab1"，在第二个回调中检查"tab2"，但Tabs 组件的active_tab 属性未设置为这些值中的任何一个。第一个选项卡的默认active_tab 值实际上是tab-0。

active_tab（字符串，可选）：当前活动选项卡的 tab_id。如果未为活动选项卡指定 tab_id，则默认为 tab-i，其中 i 是选项卡的索引（从 0 开始）。

https://dash-bootstrap-components.opensource.faculty.ai/docs/components/tabs/

由于这个if 语句失败，任何一个回调都不会返回任何内容。

而且回调函数有相同的函数名，这是不允许的。

最后，在两个回调中，您创建了一个图形，但您将跟踪添加到另一个图形，因此跟踪也不会显示，因为您返回的是一个空图形。

---

所以你可以这样做：

import pandas as pd
import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output
import plotly.graph_objects as go

df = pd.read_csv(
    "https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv"
)

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

app.layout = dbc.Container(
    fluid=True,
    children=[
        html.H1(
            "Title",
            id="Titel",
            className="ml-1",
            style={
                "text-align": "center",
                "font-weight": "bold",
                "text-decoration": "underline",
            },
        ),
        dbc.Row(
            [
                dbc.Col(
                    md=6,
                    children=[
                        html.Br(),
                        html.Br(),
                        dbc.Col(
                            md=9,
                            children=[
                                dbc.Col(
                                    html.H4("graphs in tabs"),
                                    width={"size": 6, "offset": 3},
                                ),
                                dbc.Tabs(
                                    id="tabs",
                                    className="nav nav-pills",
                                    children=[
                                        dbc.Tab(
                                            label="tab1",
                                            children=[dcc.Graph(id="grafiek1")],
                                        ),
                                        dbc.Tab(
                                            label="tab2",
                                            children=[dcc.Graph(id="grafiek2")],
                                        ),
                                    ],
                                ),
                            ],
                        ),
                    ],
                ),
                dbc.Col(md=6, children=[]),
            ]
        ),
    ],
)


@app.callback(Output("grafiek1", "figure"), [Input("tabs", "active_tab")])
def tab_content1(active_tab):
    if active_tab is not None:
        if active_tab == "tab-0":
            fig1 = go.Figure()
            fig1.add_trace(
                go.Scatter(
                    x=df["Date"],
                    y=df["AAPL.Low"],
                    mode="markers",
                    name="data",
                    line={"color": "black"},
                )
            )

            return fig1
    return go.Figure()


@app.callback(Output("grafiek2", "figure"), [Input("tabs", "active_tab")])
def tab_content2(active_tab):
    if active_tab is not None:
        if active_tab == "tab-1":
            fig2 = go.Figure()
            fig2.add_trace(
                go.Scatter(
                    x=df["Date"],
                    y=df["AAPL.High"],
                    mode="markers",
                    name="data",
                    line={"color": "black"},
                )
            )
            # add slider
            fig2.update_xaxes(rangeslider_visible=True)
            # set background color
            fig2.update_layout(
                plot_bgcolor="white", autosize=False, width=1000, height=550
            )

            return fig2
    return go.Figure()


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