Python

Question

我正在使用 Python 启动一个 plotly 和 dash 应用程序。顶部是一个包含三个选项卡的菜单：Home、Create 和 Load。我们从主屏幕开始。

我的问题：通过单击 'Home' 选项卡中的按钮，我想重定向到 'Open' 选项卡。关于如何单击一个选项卡中的按钮以转到另一个选项卡的任何想法？

下面包含我试图解决此问题的文件：

import dash
import plotly.graph_objs as go
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
from panaviaFunctions.functionsGetJSON import getJSON
from panaviaFunctions.functionsSetJSON import setJSON


app = dash.Dash()
settings = getJSON('settingsStyle.json')
app.layout = html.Div([

    html.Div([

        html.H1('Panavia', style = settings['menuTab']),

        dcc.Tabs(id = 'panaviaMenu',
                 value = 'panaviaHome',
                 children = [

                     dcc.Tab(label = 'Home',
                             value = 'panaviaHome',
                             style = settings['menuTabOff'],
                             selected_style = settings['menuTabOn']),

                     dcc.Tab(label = 'Create',
                             value = 'panaviaCreate',
                             style = settings['menuTabOff'],
                             selected_style = settings['menuTabOn']),

                     dcc.Tab(label = 'Open',
                             value = 'panaviaOpen',
                             style = settings['menuTabOff'],
                             selected_style = settings['menuTabOn'])

                 ])

    ], style = settings['panaviaMenu']),

    html.Div(id = 'panaviaTab')

])


@app.callback(Output('panaviaTab', 'children'), Input('panaviaMenu', 'value'))
def tabFunction(tab):
    '''  '''

    return {'panaviaHome' : tabHome(tab), 'panaviaCreate' : tabCreate(tab), 'panaviaOpen' : tabOpen(tab)}[tab]


def tabHome(tab):
    '''  '''

    if (tab == 'panaviaHome'):

        return html.Div([

            html.Button('Click', id = 'button')

        ], style = settings['panaviaTab'])


def tabCreate(tab):
    '''  '''

    if (tab == 'panaviaCreate'):

        return html.Div([

            html.H1('create')

        ], style = settings['panaviaTab'])


def tabOpen(tab):
    '''  '''

    if (tab == 'panaviaOpen'):

        return html.Div([

            html.H1('open')

        ], style = settings['panaviaTab'])


if (__name__ == '__main__'):

    app.run_server()

此处包含上述代码运行时使用的独立文件：

from json import load


def getJSON(arg):
    '''  '''

    with open('panaviaSettings/{}'.format(arg), 'r') as fileVariable:


        return load(fileVariable)

from json import dump


def setJSON(arg):
    '''  '''

    with open('panaviaSettings/{}'.format(arg), 'w') as fileVariable:

        dump(fileVariable, arg, indent = 4)

{

    "panaviaMenu" : {
        "margin" : 10,
        "padding" : 10,
        "borderRadius" : 5,
        "backgroundColor" : "#121212"
    },

    "menuTab" : {
        "fontSize" : 39,
        "color" : "#f5f5f5",
        "fontWeight" : "bold",
        "textAlign" : "center",
        "fontFamily" : "sans serif"
    },

    "menuTabOn" : {
        "padding" : 3,
        "borderRadius" : 5,
        "backgroundColor" : "#181818",
        "border" : "2.5px solid #181818",
        "color" : "#f5f5f5",
        "fontWeight" : "bold",
        "fontFamily" : "sans serif"
    },

    "menuTabOff" : {
        "padding" : 3,
        "borderRadius" : 5,
        "backgroundColor" : "#282828",
        "border" : "2.5px solid #282828",
        "color" : "#f5f5f5",
        "fontWeight" : "bold",
        "fontFamily" : "sans serif"
    },

    "panaviaTab" : {
        "backgroundColor" : "#121212",
        "borderRadius" : 5,
        "padding" : 5,
        "margin" : 10
    },

    "homeMap" : {
        "border" : "2.5px solid #282828",
        "backgroundColor" : "#181818",
        "borderRadius" : 5,
        "margin" : 5
    },

    "mapToken" : "< token >"

}

dash==1.20.0
dash-core-components==1.16.0
dash-html-components==1.1.3
dash-renderer==1.9.1
dash-table==4.11.3
plotly==4.14.3

Answer 1

您可以添加回调来设置 dcc.Tabs() 对象的值。默认为主页，return 如果未触发回调，则为主页 ID，因此它将在页面首次加载时设置正确的 ID。

@app.callback(
    Output('panaviaMenu', 'value'),
    [Input('button', 'n_clicks')]
)
def open_home_tab(n_clicks):
    ctx = dash.callback_context
    if not ctx.triggered:
        return 'panaviaHome'
    return 'panaviaOpen'

Python - Plotly 和 Dash - 以切换标签为目的的按钮点击

Python - Plotly and Dash - Button Click with Purpose of Switching Tabs

plotly-dash

plotly-python