从带有 Plotly Dash for Python 的回调中将 Pandas DataFrame 作为 data_table 返回
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/55269763/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Return a Pandas DataFrame as a data_table from a callback with Plotly Dash for Python
提问by sparrow
I would like to read a .csv file and return a groupby function as a callback to be displayed as a simple data table with "dash_table" library. @Lawliet's helpful answer shows how to do that with "dash_table_experiments" library. Here is where I'm stuck:
我想读取一个 .csv 文件并返回一个 groupby 函数作为回调，以显示为带有“dash_table”库的简单数据表。@Lawliet 的有用答案显示了如何使用“dash_table_experiments”库来做到这一点。这是我被困的地方：
import pandas as pd
import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_table
from dash.dependencies import Input, Output, State
df = pd.read_csv(
'https://gist.githubusercontent.com/chriddyp/'
'c78bf172206ce24f77d6363a2d754b59/raw/'
'c353e8ef842413cae56ae3920b8fd78468aa4cb2/'
'usa-agricultural-exports-2011.csv')
app = dash.Dash()
application = app.server
app.layout = html.Div([
dash_table.DataTable(
id = 'datatable',
),
html.Div([
html.Button(id='submit-button',
children='Submit'
)
]),
])
@app.callback(Output('datatable','data'),
[Input('submit-button','n_clicks')],
[State('submit-button','n_clicks')])
def update_datatable(n_clicks,csv_file):
if n_clicks:
dfgb = df.groupby(['state']).sum()
return dfgb.to_dict('rows')
if __name__ == '__main__':
application.run(debug=False, port=8080)
回答by Aboorva Devarajan
When you are trying to register the callback Outputcomponent as a DataTable, all the required / mandatory attributes for the DataTablecomponent should be updated in the callback and returned. In your code, you are updating just DataTable.dataand not DataTable.column, one easy way is to return the whole Datatablecomponent which is prepopulated with all the required attribute values.
当您尝试将回调Output组件注册为 a 时DataTable，组件的所有必需/强制属性DataTable都应在回调中更新并返回。在您的代码中，您只是更新DataTable.data而不是更新DataTable.column，一种简单的方法是返回Datatable预先填充了所有必需属性值的整个组件。
Here is an example,
这是一个例子，
import dash_html_components as html
import dash_core_components as dcc
import dash
import dash_table
import pandas as pd
import dash_table_experiments as dt
app = dash.Dash(__name__)
#data to be loaded
data = [['Alex',10],['Bob',12],['Clarke',13],['Alex',100]]
df = pd.DataFrame(data,columns=['Name','Mark'])
app.layout = html.Div([
dt.DataTable(
rows=df.to_dict('records'),
columns=df.columns,
row_selectable=True,
filterable=True,
sortable=True,
selected_row_indices=list(df.index), # all rows selected by default
id='2'
),
html.Button('Submit', id='button'),
html.Div(id="div-1"),
])
@app.callback(
dash.dependencies.Output('div-1', 'children'),
[dash.dependencies.Input('button', 'n_clicks')])
def update_output(n_clicks):
df_chart = df.groupby('Name').sum()
return [
dt.DataTable(
rows=df_chart.to_dict('rows'),
columns=df_chart.columns,
row_selectable=True,
filterable=True,
sortable=True,
selected_row_indices=list(df_chart.index), # all rows selected by default
id='3'
)
]
if __name__ == '__main__':
app.run_server(debug=True)
Looks like dash-table-experimentsis deprecated.
看起来dash-table-experiments已被弃用。
Edit 1: Here is one way of how it can be achieved using dash_tables
编辑 1：这是如何使用它来实现的一种方法 dash_tables
import pandas as pd
import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_table as dt
from dash.dependencies import Input, Output, State
df = pd.read_csv(
'https://gist.githubusercontent.com/chriddyp/'
'c78bf172206ce24f77d6363a2d754b59/raw/'
'c353e8ef842413cae56ae3920b8fd78468aa4cb2/'
'usa-agricultural-exports-2011.csv')
app = dash.Dash()
application = app.server
app.layout = html.Div([
dt.DataTable(
id = 'dt1',
columns = [{"name": i, "id": i,} for i in (df.columns)],
),
html.Div([
html.Button(id='submit-button',
children='Submit'
)
]),
])
@app.callback(Output('dt1','data'),
[Input('submit-button','n_clicks')],
[State('submit-button','n_clicks')])
def update_datatable(n_clicks,csv_file):
if n_clicks:
dfgb = df.groupby(['state']).sum()
data_1 = df.to_dict('rows')
return data_1
if __name__ == '__main__':
application.run(debug=False, port=8080)
Another way: return the whole DataTable
另一种方式：返回整个 DataTable
import pandas as pd
import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_table as dt
from dash.dependencies import Input, Output, State
df = pd.read_csv(
'https://gist.githubusercontent.com/chriddyp/'
'c78bf172206ce24f77d6363a2d754b59/raw/'
'c353e8ef842413cae56ae3920b8fd78468aa4cb2/'
'usa-agricultural-exports-2011.csv')
app = dash.Dash()
application = app.server
app.layout = html.Div([
html.Div(id="table1"),
html.Div([
html.Button(id='submit-button',
children='Submit'
)
]),
])
@app.callback(Output('table1','children'),
[Input('submit-button','n_clicks')],
[State('submit-button','n_clicks')])
def update_datatable(n_clicks,csv_file):
if n_clicks:
dfgb = df.groupby(['state']).sum()
data = df.to_dict('rows')
columns = [{"name": i, "id": i,} for i in (df.columns)]
return dt.DataTable(data=data, columns=columns)
if __name__ == '__main__':
application.run(debug=False, port=8080)
I referred to this example: https://github.com/plotly/dash-table/blob/master/tests/cypress/dash/v_copy_paste.py#L33
我参考了这个例子：https: //github.com/plotly/dash-table/blob/master/tests/cypress/dash/v_copy_paste.py#L33
回答by shivsn
You almost got it done just with minor modification in update_datatableit should work fine (not tested):
您几乎只需稍作修改就可以完成update_datatable它应该可以正常工作（未测试）：
def update_datatable(n_clicks,csv_file):
if n_clicks:
dfgb = df.groupby(['state']).sum()
return html.Div([dash_table.DataTable(
data=dfgb.to_dict('rows'),
columns=[{'name': i, 'id': i} for i in dfgb.columns],
style_header={'backgroundColor': "#FFD700",
'fontWeight': 'bold',
'textAlign': 'center',},
style_table={'overflowX': 'scroll'},
style_cell={'minWidth': '180px', 'width': '180px',
'maxWidth': '180px','whiteSpace': 'normal'},
filtering=True,
row_selectable="multi",
n_fixed_rows=1),
html.Hr()
])
