Question

我有一个Plotly破折号图表和数据表，我希望在单击其中一个图表时更新数据表。

我当前正在读取display_click_data（）中选定的条的点击数据，并使用该值过滤要用来更新数据表的数据框。问题是我不确定如何返回数据框和更新数据表。我是否需要一个单独的update_table（）函数，还是可以仅从update_click_data（）函数中返回它，并从中重新创建数据表？还是有更好的方法做到这一点？

app = DjangoDash('SimpleExample')
df1 = get_spec_dataframe('security')
df_data = get_mostfrequent_data_all()
most_frequent_words = df_data[0][:30]
most_frequent_words_values = df_data[1][:30]
df = get_dataframe()

app.layout = html.Div([
    dcc.Graph(
        id='basic-interactions',
        figure={
            'data': [
                {
                    'x': most_frequent_words,
                    'y': most_frequent_words_values,
                    'name': 'Trace 1',
                    'mode': 'markers',
                    'type': 'bar'
                }  
            ],
            'layout': {
                'clickmode': 'event+select'
            }
        }
    ),

    html.Div(className='row', children=[

        html.Div([
            html.Pre(id='click-data'),
            dash_table.DataTable(id='table',columns=[{"name": i, "id": i} for i in df.columns],data=df.to_dict('records')),
            ], className='three columns'),
    ])
])

@app.callback(
    Output('click-data', 'children'),
    [Input('basic-interactions', 'clickData')])
def display_click_data(clickData):

    if clickData != None:
        label = str(clickData['points'][0]['x'])
    else:
        label = "security"
    df = get_spec_dataframe(label)
    return (df)

Answer 1

您可以尝试以下操作：

首先，您需要将 html.Div 定义为空以便将子项作为表传递：

html.Div(id='table')

然后将您的回调配置为输出表本身：

@app.callback(Output('table', 'children'), [Input('basic-interactions', 'clickData')])
def create_table(clickData):
    if clickData != 'null':
        table = dash_table.DataTable(columns=[{"name": i, "id": i} for i in df.columns],data=df['<filter df by clickData info>'].to_dict('records'))
    else:
        table = dash_table.DataTable(columns=[{"name": i, "id": i} for i in df.columns],data=df['<don't filter df>'].to_dict('records'))

    return table

我建议使用 selectData 而不是 clickData ，这样视觉输入（条的选择）对用户来说更直观，并且更容易“取消选择"

在条形图中单击绘制破折号更新数据表数据

1 个答案: