python - 从回调函数渲染数据表 - Dash
问题描述
我正在创建一个带有多个选项卡的仪表板,每个选项卡触发器和 .py 文件呈现绘图对象的不同元素。
例如,我的回调函数返回绘图、图表,我希望返回 Datatable。
我可以使用 go.Table 渲染 pandas 数据帧,如示例中所示,但不能使用 DataTable,它更新并提供增强的用户体验。
import pandas as pd
import dash
from dash.dependencies import Input, Output, State
import dash_html_components as html
import dash_core_components as dcc
import plotly.plotly as py
from plotly import graph_objs as go
from plotly.graph_objs import *
import dash_table
import flask
from datetime import datetime as dt
from app import app
layout = html.Div([
html.Div([
dcc.Dropdown(
id='select',
options=[{'label': i, 'value': i} for i in List],
value='abc',
placeholder="xyz",
style={'width': '100%'}
),
], style={"width": "15%", "margin-left": "20%", "margin-right": "35%"}),
html.Div([
dash_table.DataTable(
id='my-table',
columns=[{"name": i, "id": i} for i in df_lease.columns],
)
])
])
@app.callback(Output('my-table', 'data'),
[
Input("landlord-select", "value")
]
)
def render_table(company, market):
df_sub1 = df_lease[(df_lease['Landlord'] == company)]
df_sub1 = df_sub1[['UnitNo',
'Commencement_Date',
'Expiration_Date'
]]
return df_sub1.to_dict(orient='records')
预期的行为是将 pandas 数据框呈现为 DataTable。
文件结构:
- app.py
- index.py
- apps
|-- __init__.py
|-- app1.py
|-- app2.py
index.py 包含呈现多页/选项卡布局的所有代码,并且 children 属性dcc.Tabs
随着模板文件 (app1.py) 中的布局对象的传递而更新。我相信,这就是产生错误的地方。
app.layout = html.Div([
# tabs
html.Div([
dcc.Tabs(
id="tabs",
style={"height":"60","verticalAlign":"middle"},
children=[
dcc.Tab(label="Marketing", value="marketing_tab"),
dcc.Tab(label="Tenants", value="tenants_tab"),
dcc.Tab(label="Portfolio", value="portfolio_tab"),
],
value="marketing_tab",
)
],
className="row tabs_div"
),
# Tab content
html.Div(id="tab_content", style={"margin": "2% 3%"})
])
@app.callback(Output("tab_content", "children"),
[
Input("tabs", "value")
]
)
def render_content(tab):
"""
For user selections, return the relevant tab
"""
if tab == "marketing_tab":
return marketing.layout
elif tab == "tenants_tab":
return tenants.layout
elif tab == "portfolio_tab":
return portfolio.layout
else:
return marketing.layout
# In[10]:
if __name__ == '__main__':
app.run_server(debug=True)
解决方案
这个链接有一些很好的例子供你查看。基本上,您会希望您的回调更新data
表格的道具。像这样的东西:
@app.callback(
Output('my-table', 'data'),
[Input('dropdown', 'value')])
def callback_a(i):
df = pd.DataFrame(numpy.arange(30).reshape(5, 6))
return df.to_dict(orient='records')
重要的是定义表的列,id
以便每列的列与数据框中的列名匹配。如果您要更改表中的数据,那么您可能还需要另一个回调/输出来更新columns
道具。
推荐阅读
- javascript - 不知道为什么长度未定义
- sql - 在 Oracle SQL Live 中使用 alter 添加多个外键
- javascript - D3 将对象传递给 .attr 或 .style
- javascript - 列表和样式中的反应备忘录问题
- macos - 用于 mac 的 Silabs CP210x 驱动程序无法正常工作。- 2月21日
- excel - 在 vb.net 中读取扩展名为 .xlsb 的 Excel 文件
- visual-studio-code - VSCODE.window.showInputBox 是否提供了一种通过消息拒绝输入并重新提示的方法?
- java - 如何制作自定义日期格式,该格式将根据区域设置(美国或英国)更改 MMdd 订单
- c# - 将属性添加到覆盖的属性
- javascript - 如何防止在 IE 上将选项标签元素分成两部分?