Dash plotly 实时更新数据表答案

【问题标题】：Dash plotly live update datatableDash plotly 实时更新数据表
【发布时间】：2021-05-23 17:51:47
【问题描述】：

我想根据可编辑数据表https://dash.plotly.com/datatable/editable 上的文档为添加列功能实现实时更新功能，以便在更新 CSV 文件时将新列添加到数据表中。我的回调工作正常，我可以添加新列，因为新的 CSV 数据通过实时更新进行更新，但我遇到了一些问题。在我的第一次尝试中（标记为第一个代码），我声明了一个全局变量（我知道它在 DASH 中不好），以尝试跟踪当前的 CSV 内容并将其与更新的 CSV 文件进行比较以检查新数据，但是此版本无法在初始启动时加载现有 CVS 数据，仅添加新数据。第二个代码将现有的 CSV 数据加载到列中，但在实时更新时它只是添加了重复的列。我不能简单地用新的 CSV 文件重新制作整个数据表，因为如果单元格中有用户输入，那么更新时会丢失。

因此，我的问题是：如何在不使用 Dash 中的全局变量的情况下存储某物的状态（即：CSV 数据的行数），以便我能够将 CSV 文件的现有状态与新的状态进行比较状态。我看不到这是如何完成的，因为分配的变量在实时更新时被重置。我已经阅读了有关 Hidden Div 并将数据存储在用户浏览器会话中的信息，但我无法让它工作。这是我应该走的方向还是有更优雅的解决方案？

html.Div([dash_table.DataTable(
        id='editing-columns',
        columns=[{
                'name': 'Parameter',
                'id': 'column1',
                'deletable': True,
                'renamable': True
        }],
        style_cell={
                'whiteSpace': 'normal',
                'height': 'auto',
                'width': '20',
                # 'minWidth': '50px',
                'textAlign': 'left',
    },
        data=[
                {'column1': j}
                for j in table_contents
        ],
        editable=True,
    )], className="drug_input"),

#First code
@app.callback(Output('editing-columns', 'columns'),
              [Input('graph-update', 'n_intervals')],
              [State('editing-columns', 'columns')])
def update_columns(n, existing_columns):
    check_length = []
    global sierra
    with open('assets' + '/' + 'record ' + str(current) + '.csv', 'r') as rf:
        reader = csv.reader(rf)
        for a in reader:
            check_length.append(a[3])

    if len(check_length) == 0:
        return existing_columns

    elif len(check_length) > sierra:
        existing_columns.append({
            'id': check_length[-1], 'name': check_length[-1],
            'renamable': True, 'deletable': True
            })

        sierra = len(check_length)
        return existing_columns

    else:
        return existing_columns

#Second code
@app.callback(Output('editing-columns', 'columns'),
              Input('graph-update', 'n_intervals'),
              State('editing-columns', 'columns'))

def update_columns(n, existing_columns):
    counter = 0
    with open('assets' + '/' + 'record ' + str(current) + '.csv', 'r') as rf:
        reader = csv.reader(rf)
        for a in reader:

            counter = counter + 1
            existing_columns.append({
                'id': 'counter', 'name': a[3],
                'renamable': True, 'deletable': True
            })

        return existing_columns

【问题讨论】：

标签： datatable plotly-dash

【解决方案1】：

我已阅读有关 Hidden Div 和在用户浏览器会话中存储数据的信息，但我无法让它工作。这是我应该走的方向还是有更优雅的解决方案？

是的，您应该为此使用store 组件。

您可以将所有内容存储在 dict 中，一个键用于原始文件，另一个键包含修改后的用户输入键。确保每个回调在存储中读取为State。一个应该输出到table，另一个应该输出到store。

【讨论】：