时间戳

首页 > 解决方案 > Plotly Dash：结合加载静态和动态图的问题

python - Plotly Dash：结合加载静态和动态图的问题

问题描述

使用破折号我正在尝试加载图表并在运行时生成一些其他图表。我在代码中使用的方法是generateMainGraph和generateRuntimeGraph。

如果我单独使用其中一种方法，它可以正常工作，但结合使用，它就不起作用。我得到的错误范围从syntax error到The children property of a component is a list of lists, instead of just a list。

import dash
import dash_table
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, ClientsideFunction

SUBCATEGORY_LIST = [['a1', 'a2'], ['b1', 'b2', 'b3', 'b4'],['c1', 'c2']]

app = dash.Dash(__name__)
    
def generateSubcategoryCards():
    ddvaluearray = ['a1', 'a2']
    return html.Div(id='dynamic_subparam_card',
        children=[
            dcc.Dropdown(
                id='dynamic-subparam_dd',
                options=[{'label': i, 'value': i}
                         for i in ddvaluearray],
                value=[i for i in ddvaluearray],
                multi=True,
            ),
            dcc.Graph(id='dynamic_subparam-graph'),
        ],
    ),

def generateMainGraph():
    return html.Div(id="priority-tab", children=[
        html.B("Main Category"),
        dcc.Tabs(id="tabs-styled-with-inline", value='tab-graph', children=[
            dcc.Tab(label='Graph Tab', value='tab-graph',   children=[
                        html.Div(id="pcard",
                            children=[dcc.Graph(id="main-graph")],
                        )
                    ]
                    ),
            dcc.Tab(label='Data Table Tab', value='tab-datatable', children=[
                        html.Div(id="pcard2")]
                    ),
        ], 
        ),
        html.Div(id='tabs-content-inline')
    ])
    
def generateRuntimeGraph(n_value):
    params = SUBCATEGORY_LIST[n_value]
    return html.Div(
        id={
            'type': 'dynamic_subparam_card',
            'index': n_value
        },
        children=[
            html.B("Subcategory'" + str(n_value) + "' graphs by parameters"),
            dcc.Dropdown(
                id={
                    'type': 'dynamic-subparam_dd',
                    'index': n_value
                },
                options=[{'label': i, 'value': i} for i in params],
                value=[i for i in params],
                multi=True,
            ), html.Hr(),
            dcc.Graph(
                id={
                    'type': 'dynamic_subparam-graph',
                    'index': n_value
                },
                figure={}
            ),
        ],
    )

app.layout = html.Div(
    id="app-container",
    children=[
        generateMainGraph(), # This works if below method is commented and vice versa
        generateRuntimeGraph(i) for i in range(len(SUBCATEGORY_LIST))
            ]
)

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

标签： pythondynamicruntimeplotly-dash

解决方案

如果您将输出包含在它们自己的容器中generateMainGraph，generateRuntimeGraph如下所示，您的代码应该可以工作。

app.layout = html.Div(
    id="app-container",
    children=[
        html.Div(children=generateMainGraph()),
        html.Div(children=[generateRuntimeGraph(i) for i in range(len(SUBCATEGORY_LIST))]),
    ]
)

推荐阅读