Question

在以下代码中，该代码根据从下拉菜单中选择的选项生成一个简单的图形。

有没有一种方法可以在图表下方添加另一个部分，该部分也将根据下拉菜单中选择的“选项”进行更新。示例-对于单个选项“ Option_A”，绘制图表并显示“ Option_A”的更改日志。

app = dash.Dash()

app.layout = html.Div([
    html.H1('XYZ_Header', className='banner'),
    html.Div([
        html.P('abc_paragraph')
    ]),

    html.Div([
        html.P("X Data"),
        dcc.Dropdown(id='start_time',
            options=[
                {'label': 'xxx_1', 'value':'x_1'},
                {'label': 'xxx_2', 'value': 'x_2'}
            ],
            value='x_1')
        ], style={'width': '40%', 'margin-left': '3%', 'display': 'inline-block'}),

    html.Div([
        html.P("Y Data"),
        dcc.Dropdown(id='end_time', options=[
                {'label': 'yyy_1', 'value':'y_1'},
                {'label': 'yyy_2', 'value': 'y_2'}
            ],
            value='today')
        ], style={'width': '31%', 'margin-left': '3%', 'display': 'inline-block'}),

    dcc.Dropdown(
        id='my-dropdown',
        options=[
            {'label': 'AAA', 'value': 'Option_A'},
            {'label': 'BBB', 'value': 'Option_B'},
            {'label': 'CCC', 'value': 'Option_C'}
        ],
        value='Option_A'
    ),
    dcc.Graph(id='my-graph')
])

@app.callback(
    Output(component_id='my-graph', component_property='figure'),
    [
        Input(component_id='my-dropdown', component_property='value'),
        Input(component_id='start_time', component_property='value'),
        Input(component_id='end_time', component_property='value')
    ]
    )
def update_graph(selected_dropdown_value, start_time, end_time):
    .
    .
    .
    df = pdr.get_data(selected_dropdown_value, start_time, end_time)
    return {
        'data': [{
            'x': df.index,
            'y': df.Close
        }]
    }


if __name__ == '__main__':
    app.run_server(host='127.0.0.1', port=8888)

输出看起来像这样-

---------------------------------- Output ---------------------------

XYZ_Header
abc_paragraph

<
.
dropdown menu is displayed here
.
>

<
.
.
.
graph is displayed/updated as per the 'option' selected in the dropdown menu
.
.
.
.
>

# My question : 
#   The way I'm updating the graph for each selected 'option', 
#     Is there a way I can update text (using some other APIs) as well?
#     Can someone please share an example ?


---------------------------------------------------------------------

Answer 1

我遇到了一个解决方案。如果您能想到更好的解决方案，请发表评论-

创建了另一个回调，对于该回调，输出为：

<tr ng-repeat-end ng-if="result.inventId!==0"
                            ng-click="crud.selectedIndex=$index;"
                            ng-class="{selected: $index === crud.selectedIndex && result.rowNumber > 1}">
                            <td></td>
                            <td></td>
                            <td>
                                {{result.inventoryDescrip}}
                            </td>

有没有一种方法可以使用Plotly的Python Dash中的单个下拉选项来更新两个部分

1 个答案: