在网页中显示 pandas Dataframe 并使用 Dash 动态过滤

Question

我正在尝试使用 Dash 显示数据框。我拥有的数据框是 https://www.kaggle.com/timoboz/superbowl-history-1967-2020。我的目标是使用一个搜索按钮在网页上显示数据框，该按钮动态搜索所有列并过滤数据框。

到目前为止，我有以下显示数据框的代码。

import pandas as pd
import dash
import dash_table
from dash.dependencies import Input, Output
df  = pd.read_csv('./Data/superbowl.csv')
PAGE_SIZE = 10
app = dash.Dash(__name__)

app.layout = dash_table.DataTable(
    id='datatable-paging',
    columns=[
        {"name": i, "id": i} for i in df.columns #sorted(df.columns)
    ],
    page_current=0,
    page_size=PAGE_SIZE,
    page_action='custom',

    sort_action='custom',
    sort_mode='single',
    sort_by=[]
)


@app.callback(
    Output('datatable-paging', 'data'),
    [Input('datatable-paging', "page_current"),
     Input('datatable-paging', "page_size"),
     Input('datatable-paging', 'sort_by')])
def update_table(page_current,page_size,sort_by):
    if len(sort_by):
        dff = df.sort_values(
            sort_by[0]['column_id'],
            ascending=sort_by[0]['direction'] == 'asc',
            inplace=False
        )
    else:
        # No sort is applied
        dff = df

    return dff.iloc[
           page_current * page_size:(page_current + 1) * page_size
           ].to_dict('records')



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

在通读了文档 https://dash.plot.ly/datatable/callbacks 尤其是 'Backend Paging with Filtering' 之后，我找不到一种方法可以像单个文本框那样搜索所有列并过滤匹配条目的数据框。

Answer 1

执行此操作的最佳方法是为您的搜索查询使用输入组件。然后可以通过执行 pandas 过滤器来更新 table。 returns 任何单元格包含文本的所有行。

下面的过滤器回调示例：

@app.callback(
    Output('datatable', 'data'),
    [Input('filter-input', 'value')])
def update_table(filter_string):
    dff = df[df.apply(lambda row: row.str.contains(filter_string, regex=False).any(), axis=1)]
    return dff.to_dict('records')

您在下面的输入组件（注意去抖动的使用 - 这意味着只有在用户按下回车键时才会执行回调）：

和import dash_core_components as dcc

dcc.Input(value='', id='filter-input', placeholder='Filter', debounce=True)

将您当前的代码放在一起：

import pandas as pd
import dash
import dash_table
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

df = pd.read_csv('./Data/superbowl.csv')
PAGE_SIZE = 10
app = dash.Dash(__name__)

app.layout = html.Div([
    dcc.Input(value='', id='filter-input', placeholder='Filter', debounce=True),
    dash_table.DataTable(
        id='datatable-paging',
        columns=[
            {"name": i, "id": i} for i in df.columns  # sorted(df.columns)
        ],
        page_current=0,
        page_size=PAGE_SIZE,
        page_action='custom',

        sort_action='custom',
        sort_mode='single',
        sort_by=[]
    )
])


@app.callback(
    Output('datatable-paging', 'data'),
    [Input('datatable-paging', 'page_current'),
     Input('datatable-paging', 'page_size'),
     Input('datatable-paging', 'sort_by'),
     Input('filter-input', 'value')])
def update_table(page_current, page_size, sort_by, filter_string):
    # Filter
    dff = df[df.apply(lambda row: row.str.contains(filter_string, regex=False).any(), axis=1)]
    # Sort if necessary
    if len(sort_by):
        dff = dff.sort_values(
            sort_by[0]['column_id'],
            ascending=sort_by[0]['direction'] == 'asc',
            inplace=False
        )

    return dff.iloc[
           page_current * page_size:(page_current + 1) * page_size
           ].to_dict('records')


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

希望这对您有所帮助，

奥利

在网页中显示 pandas Dataframe 并使用 Dash 动态过滤

Show pandas Dataframe in webpage and dynamically filter using Dash

python-3.x

pandas

plotly

plotly-dash