使用破折号 DataTable 的回调创建工具提示

Question

我正在尝试使用回调为破折号 data_table 创建工具提示。但是我多次尝试都没有成功。

我已经看到通过从路径读取 csv 来创建工具提示的示例。但在我的情况下，数据框是在回调函数中创建的，并在单击提交按钮后返回。下面是我正在使用的代码

display_cols=["col1","col2","col3","col4"]
columns_property=[{"name": i, "id": i, "deletable": False, "selectable": True, "renamable":True, "hideable":True} for i in display_cols]
dash_table.DataTable(id="table",
                columns=columns_property,data=[],fill_width=True,
                           export_columns="all",export_format="xlsx", sort_action="native",is_focused=True,
                              sort_mode="multi",export_headers ="names",editable=True,tooltip_data=tooltip,## Tootlip is returned from callback as options
                              style_cell={'textAlign': 'left','border': '1px solid grey', 
                                          'whiteSpace':'normal','height':'auto'},
                              style_header={'backgroundColor': 'white','fontWeight': 'bold',
                                            'border': '1px solid black'},
                              style_table={'fontFamily': 'Open Sans',
                                      'textAlign': 'right',
                                      'whiteSpace': 'no-wrap',                                                         
                                      'overflowX': 'scroll',
                                      'minWidth': '100%',
                                      'height': '600px', 
                                      'overflowY': 'scroll'})



@app.callback([Output('table', 'data'),Output("tooltip", "options")   ],        
            
        [Input('submit3', 'n_clicks')],                
        [
        State('input1', 'value'),
        State('input2', 'value')
        ]
)
def update_output(clicked, input1, input2):
if clicked:        
    input_file=input1
    model_path=input2

    """ Some Code for Generatng DF"""
              
    df=df[["col1","col2","col3","col4"]] 
    
    tooltip_data= [{c:{'type': 'text', 'value': f'{r},{c}'} for c in df.columns} for r in df[df.columns].values]
    
return list(df.to_dict("index").values()), tooltip_data

Answer 1

因此，当您有问题时，如果您提供的代码可以独立运行，这将很有帮助。看起来您提供的代码是一个更大项目的一部分，并且缺少许多必需的调用和样板类型的东西才能工作。

通过将您的代码制作成可运行的 Dash 应用程序，我可能无意中修复了问题。此外，我发现将 dash_table.DataTable() 的每个函数参数放在单独的行上可以更容易阅读、排除故障和验证。由于有无数的争论，它可能会变得非常疯狂。

我发现 Dash DataTable 文档非常好。我建议通读这篇文章以了解使用和设置工具提示的各种方法：

https://dash.plotly.com/datatable/tooltips

您提供了一个工具提示依赖于回调的用例。回调可能很复杂，因为它们是由页面更改触发的（更改通常意味着来自用户的输入）。回调在初始应用启动时运行，然后在每次指定的输入更改时运行。

虽然回调在应用启动时运行，但您不能在对象定义中列出回调的输出。所以，这部分：

dash_table.DataTable(#...
tooltip_data=tooltip,## Tootlip is returned from callback as options
#...

由于未定义 tooltip 导致语法错误。回调配置将指定回调返回值的去向。在这种情况下，您没有开始使用的工具提示，因此 dash_table.DataTabl() 不应指定参数。

这是一个经过调整的代码版本，可以运行并显示工具提示。

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go
import pandas as pd
import numpy as np
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output, State
import dash_table

app = dash.Dash(__name__)

display_cols=["col1","col2","col3","col4"]
columns_property=[{"name": i, "id": i, "deletable": False, "selectable": True, "renamable":True, "hideable":True} for i in display_cols]
app.layout = html.Div(children=[
    html.Div(
        dcc.Input(
            id="submit3",
            type='number'
        )
    ),
    dash_table.DataTable(id="table",
                         columns=columns_property,
                         data=[],
                         fill_width=True,
                         export_columns="all",
                         export_format="xlsx",
                         sort_action="native",
                         is_focused=True,
                         sort_mode="multi",
                         export_headers ="names",
                         editable=True,
                         style_cell={'textAlign': 'left','border': '1px solid grey', 
                                     'whiteSpace':'normal','height':'auto'},
                         style_header={'backgroundColor': 'white','fontWeight': 'bold',
                                       'border': '1px solid black'},
                         style_table={'fontFamily': 'Open Sans',
                                      'textAlign': 'right',
                                      'whiteSpace': 'no-wrap',
                                      'overflowX': 'scroll',
                                      'minWidth': '100%',
                                      'height': '600px',
                                      'overflowY': 'scroll'})
])

@app.callback([Output('table', 'data'),
               Output("table", "tooltip_data")],
              [Input('submit3', 'value')]
)
def update_output(input1):
    """ Some Code for Generatng DF"""
    df=pd.DataFrame(np.random.randint(0,10,size=(10, 4)), columns=['col1', 'col2', 'col3', 'col4'])
    
    # tooltips
    tooltip_data= [{c:{'type': 'text', 'value': f'{r},{c}'} for c in df.columns} for r in df[df.columns].values]
    
    return list(df.to_dict("index").values()), tooltip_data

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