Plotly-Dash：- 文件上传后在 plotly dash 中进行多列过滤

Posted 2023-02-18

【中文标题】Plotly-Dash：- 文件上传后在 plotly dash 中进行多列过滤

【英文标题】：Plotly-Dash:- Multiple column filtering in plotly dash after file upload

【发布时间】：2021-02-08 09:44:56

【问题描述】：

我想在上传 excel 或 csv 文件后在数据框中实现多列过滤器并保存生成的数据框。下面是代码。我已经完成了上传文件并能够显示它的代码。我需要获取过滤选项并保存结果数据。以下是我当前的代码

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

#html Layout

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)


server = app.server
app.layout = html.Div([           
    html.Div([
   html.Center(
       dcc.Upload(
        id='upload-data',
        children=html.Div([
            'Drag and Drop or ',
            html.A('Select File')
        ]),
        style=
            'width': '20%',
            'height': '32px',
            'lineHeight': '32px',
            'borderWidth': '1px',
            'borderStyle': 'dashed',
            'borderRadius': '5px',
            'textAlign': 'center',
            'margin': '10px'
        ,
        # Allow multiple files to be uploaded
        multiple=True
    )),
    ]),
    html.Div(id='output-data-upload'),
    html.Br(),
    
    html.Br(),
    html.Div([
        html.Center(html.H6(id='my-output'))
        #html.Div(id='my-output'),
    ]),
   
    ]),
    
   
    
])

    
# Function for reading the data

def parse_data(contents, filename):
    content_type, content_string = contents.split(',')

    decoded = base64.b64decode(content_string)
    try:
        if 'csv' in filename:
            # Assume that the user uploaded a CSV or TXT file
            df = pd.read_csv(
                io.StringIO(decoded.decode('utf-8')))
        elif 'xls' in filename:
            # Assume that the user uploaded an excel file
            df = pd.read_excel(io.BytesIO(decoded))
        elif 'txt' or 'tsv' in filename:
            # Assume that the user upl, delimiter = r'\s+'oaded an excel file
            df = pd.read_csv(
                io.StringIO(decoded.decode('utf-8')), delimiter = r'\s+')
    except Exception as e:
        print(e)
        return html.Div([
            'There was an error processing this file.'
        ])

    return df



            
#Call backs 

def generate_table(df_final):
    return dash_table.DataTable(data=df_final.to_dict('rows'),columns=['name': i, 'id': i for i in df_final.columns],editable=True,
                                    virtualization=True,
                                    fixed_rows='headers': True,
                                    page_current=0,
                                    page_size=5,
                                    style_table= 'height':'350px','overflowY': 'auto',
                                    style_cell_conditional=['if': 'column_id': c,'textAlign': 'left' 
                                                           for c in ['Date', 'Region']],style_data_conditional=[
                                       'if': 'row_index': 'odd','backgroundColor': 'rgb(248, 248, 248)'],
                                    style_header='backgroundColor': 'rgb(230, 230, 230)','fontFamily':'sans-serif',
                                                  'fontWeight': 'bold',"fontSize":'13px',
                                    
                                    style_cell='minWidth': 95, 'maxWidth': 95, 'width': 95
                                   )

@app.callback(Output('output-data-upload','children'),
              [Input('upload-data', 'contents')],
              [State('upload-data', 'filename')]
    
)


#function for displaying the preview of the input file.

def display_table(contents,filename):
    if contents:
        contents = contents[0]
        filename= filename[0]
        df = parse_data(contents,filename)
        return html.Div([
            html.Center(html.H5('Preview')),
            html.Center(
                html.Div([
               
                    html.Div([
                        generate_table(df_final_1)
                    ])
                    ],style='width':'85%'
                )
        )])
    
@app.callback(Output('output-confirm','children'),
              [Input('submit-filter', 'n_clicks')]
    
)

def filter_button(n_clicks):
    if n_clicks:
        return 'Successful'
   
    

#Calling the server    

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

【参考方案1】：

这里隐藏着许多问题，而且在一个答案中无法详细涵盖。通常，您要做的是使用 CSV 中的值来更新下拉菜单、多下拉菜单或其他组件之类的内容，以允许用户进行过滤选择。然后，该组件（或那些组件）将触发一个回调，该回调还包括来自 CSV 的数据、执行过滤并将其输出到 Dash UI 或您正在使用的任何形式的存储（例如本地文件系统） 、SQL 数据库等）。

【讨论】：

没错。否则，在上传文件后，单击按钮会给出两个列值（属于分类）的两个下拉（组件）选项，选择这些值将产生单独的数据框，我将显示并保存它。