Добавление всплывающей подсказки к ячейке в таблице начальной загрузки с помощью Dash - PullRequest
Новая
       43

Добавление всплывающей подсказки к ячейке в таблице начальной загрузки с помощью Dash

0 голосов
/ 21 января 2019

Я использую Dash для создания приложения, и часть приложения отображает таблицу данных. Я преобразую таблицу из pandas фрейма данных в таблицу начальной загрузки в Dash, используя функцию Table() из dash-bootstrap-components.

с моим столом 

import dash-bootstrap-components as dbc
import dash_html_components as html
import dash

data_table = dbc.Table(# code to construct table)

Я бы хотел использовать dbc.Tooltip для добавления всплывающей подсказки к элементам (html.td() элементам) в моем data_table. Моей первой мыслью было присвоить каждому элементу в таблице id, соответствующий его положению, а затем прикрепить всплывающую подсказку 

tooltip = dbc.Tooltip("Tooltip text", target = id)

Тогда мы сложим все вместе. 

app = dash.Dash(_name_)
app.layout = html.Div(
                 children = [data_table, tooltip]
             )

Однако, похоже, это не работает, и я борюсь с тем, как реализовать это теоретически, и не могу найти большой помощи.

UPDATE:

Вот пример кода того, что я пытаюсь сделать. Выдает ошибку, если вы удалите закомментированный в разделе «УДАЛИТЬ РАБОТУ», код будет работать. 

import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_bootstrap_components as dbc
import pandas as pd


app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

data = {
            "Name" : ["Tom", "Jack", "Jill", "Jane"],
            "Age"  : [21, 30, 45, 80]
        }
fixt_df = pd.DataFrame.from_dict(data)

#Setup table
table = dbc.Table(
            # Header
            [html.Thead([html.Tr([html.Th(col) for col in fixt_df.columns])])] +

            # Body
            [html.Tbody([html.Tr([html.Td(html.A(fixt_df.iloc[i][col], id = ""+str(i)+"_" + col))
                for col in fixt_df.columns])
                for i in range(len(fixt_df))])]
            ,
            hover = True,
            className = "table-responsive table-hover"
        )

items = [table]
# REMOVE TO WORK
for col in fixt_df.columns:
    for i in range(len(fixt_df)):
        items.extend([dbc.Tooltip("test", target = str(i)+"_"+col)])
# REMOVE TO WORK
app.layout = html.Div(
                children = [
                    #header
                    html.Div(
                        html.H1("Example")
                    ),
                    #table
                    html.Div(
                        items
                    )
                ]
            )

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

1 Ответ

0 голосов
/ 27 января 2019

Я нашел вашу проблему - по какой-то причине элемент dbc.Tooltip плохо работает с элементами, идентификаторы которых начинаются с цифры.

Чтобы преодолеть это, в идентификаторах элементов и подсказках цели просто меняются: 

str(i)+"_"+col

до: 

col+"_"+str(i)

Кроме того, вы можете добавить префикс буквы: 

"p_"+str(i)+"_"+col
...