Question

我在仪表板上创建了dash_table。当我将鼠标悬停在表格上时，我想要从表格悬停数据，而当我单击表格中的任何单元格时，我想要单击数据。我已经使用以下代码来获取活动单元格索引。但是我不知道如何使用它来获取数据表单元格值。

@app.callback(Output('click-data', 'children'),
    [Input('datatable', 'active_cell')])
def display_click_data(active_cell):
    return json.dumps(active_cell, indent=2)

请指导如何在破折号表中使用工具提示参数。

Answer 1

关于您的第一个问题 (A) 如何获取活动单元格的值，您可以将表格数据作为 State 传递给您的回调，然后只需选择选定的行和列。

要解决您的第二个问题 (B) 并对所选单元格使用工具提示（尚未实现悬停），来自官方 docs 的示例工作正常。

请在下面找到一个最小的例子（dash-1.19.0，dash_table-4.11.2）：

# import modules    
import json    
import pandas as pd    
import dash
import dash_html_components as html
from dash.dependencies import Input, Output, State
import dash_table

# prepare dash_table    
size = 5
df = pd.DataFrame([], index=range(size))
df['num'] = range(size)
df['char'] = list('abcdefghijk')[:size]    
tab = dash_table.DataTable(
    id='table',
    columns=[{"name": i, "id": i} for i in df.columns],
    data=df.to_dict('records'),
    tooltip_data=[
        {
            # (B) multiply cell value by 10 for demonstration purpose
            column: {'value': str(value*10), 'type': 'markdown'}
            for column, value in row.items()
        } for row in df.to_dict('records')
    ],
    tooltip_delay=0,
    tooltip_duration=None
)

# set layout    
app = dash.Dash('SimpleExample')     
app.layout = html.Div([
    tab,
    html.Div(id='click-data', style={'whiteSpace': 'pre-wrap'}),

])

# define callback        
@app.callback(
    Output('click-data', 'children'),
    [Input('table', 'active_cell')],
     # (A) pass table as data input to get current value from active cell "coordinates"
    [State('table', 'data')]
)
def display_click_data(active_cell, table_data):
    if active_cell:
        cell = json.dumps(active_cell, indent=2)    
        row = active_cell['row']
        col = active_cell['column_id']
        value = table_data[row][col]
        out = '%s\n%s' % (cell, value)
    else:
        out = 'no cell selected'
    return out
 
# run app    
if __name__ == '__main__':
    app.run_server(debug=True)

悬停数据并单击破折号dash_table中的数据

1 个答案: