改变 plotly dash_table 数据表数据值导致空白单元格
Changing plotly dash_table datatable data value results in blank cells
我正在尝试创建一个绘图界面,用户可以在其中上传不带 header 的 csv 文件并上传包含 header 的单独文本文件。 csv文件会显示在一个table中,当文本文件被选中并加载时,数据table的第header列将被header列替换]s 包含在文本文件中。
我尝试了两种方法来做到这一点:
第一个是在 app.layout 中有一个 div 并且有一个回调函数 return 一个数据 table 到那个 div。使用此方法,数据 table 可以正确加载,但我不知道如何引用和更改此 table.
的列
第二种方式是在app.layout中有一个空白table,在pandasto_dict()中有一个回调函数return数据。使用这种方法,我可以通过其 id 引用 table 并更改其列。但是,当我 运行 回调函数时,结果数据 table 是空白的(尽管行数似乎是正确的)。
这是app.layout
app.layout = html.Div([
html.H1('Upload File'),
dcc.Upload(
id ='upload_data',
children = html.Button('Select Data File',
id = 'load_data_button')
),
html.H2('Upload Headers'),
dcc.Upload(
id ='upload_headers',
children = html.Button('Select Headers File',
id = 'load_header_button')
),
html.Div(id = 'my_headers'),
html.Div(id = 'my_data'),
html.Div(
dash_table.DataTable(
id = 'load_data_table'
)
)
])
虽然这是有问题的回调
@app.callback(
Output('load_data_table', 'data'),
[Input('upload_data', 'contents')]
)
def update_table(content):
if content is not None:
content_type, content_string = content.split(',')
decoded = base64.b64decode(content_string)
df = pd.read_csv(io.BytesIO(decoded), header = None)
return df.to_dict('records')
else:
return [{}]
这是我提到的第二种方法的代码。如图,初始的table数据没有设置,输出映射到table的数据。
我预计数据会出现在 table 中,但实际上 table 单元格是空白的。但是,行数是正确的(即如果我的 csv 是 5 行,它会生成 5 行空单元格),这让我认为至少通过回调发送了一些东西。
有谁知道如何修复我提到的两种方法或知道完成此任务的更好方法吗?
我遇到过类似的问题,我的解决方案是使用列 name
和 id
值。每列的 name
是它将显示的内容,我认为这是您在用户添加列后需要更改的内容。每列的 id
需要与您传递给 table.
的 data
道具的 df
中的列名完全匹配
您的这些值很可能不匹配。发生这种情况时,数据为 "there",这就是为什么您会看到正确的行数,但 table 不会显示它,因为列是错误的。如果您对 table 的 column
道具有单独的回调,请确保发送正确的值。
我正在尝试创建一个绘图界面,用户可以在其中上传不带 header 的 csv 文件并上传包含 header 的单独文本文件。 csv文件会显示在一个table中,当文本文件被选中并加载时,数据table的第header列将被header列替换]s 包含在文本文件中。
我尝试了两种方法来做到这一点: 第一个是在 app.layout 中有一个 div 并且有一个回调函数 return 一个数据 table 到那个 div。使用此方法,数据 table 可以正确加载,但我不知道如何引用和更改此 table.
的列第二种方式是在app.layout中有一个空白table,在pandasto_dict()中有一个回调函数return数据。使用这种方法,我可以通过其 id 引用 table 并更改其列。但是,当我 运行 回调函数时,结果数据 table 是空白的(尽管行数似乎是正确的)。
这是app.layout
app.layout = html.Div([
html.H1('Upload File'),
dcc.Upload(
id ='upload_data',
children = html.Button('Select Data File',
id = 'load_data_button')
),
html.H2('Upload Headers'),
dcc.Upload(
id ='upload_headers',
children = html.Button('Select Headers File',
id = 'load_header_button')
),
html.Div(id = 'my_headers'),
html.Div(id = 'my_data'),
html.Div(
dash_table.DataTable(
id = 'load_data_table'
)
)
])
虽然这是有问题的回调
@app.callback(
Output('load_data_table', 'data'),
[Input('upload_data', 'contents')]
)
def update_table(content):
if content is not None:
content_type, content_string = content.split(',')
decoded = base64.b64decode(content_string)
df = pd.read_csv(io.BytesIO(decoded), header = None)
return df.to_dict('records')
else:
return [{}]
这是我提到的第二种方法的代码。如图,初始的table数据没有设置,输出映射到table的数据。
我预计数据会出现在 table 中,但实际上 table 单元格是空白的。但是,行数是正确的(即如果我的 csv 是 5 行,它会生成 5 行空单元格),这让我认为至少通过回调发送了一些东西。
有谁知道如何修复我提到的两种方法或知道完成此任务的更好方法吗?
我遇到过类似的问题,我的解决方案是使用列 name
和 id
值。每列的 name
是它将显示的内容,我认为这是您在用户添加列后需要更改的内容。每列的 id
需要与您传递给 table.
data
道具的 df
中的列名完全匹配
您的这些值很可能不匹配。发生这种情况时,数据为 "there",这就是为什么您会看到正确的行数,但 table 不会显示它,因为列是错误的。如果您对 table 的 column
道具有单独的回调,请确保发送正确的值。