收到新数据后如何替换仪表板/绘图表/或更新当前表

时间:2020-07-03 08:06:46

标签: python callback plotly-dash

我想建立一个不时更新的数据表。每次发生这种情况时,该表都应该从csv文件中获取数据。为了做到这一点,我建立了一个生成并返回表的函数。在第二次更新后,此方法起作用了-但是我生成的第一个表仍然存在,因此我最终进入了一个表,其中一个表执行了我想要的操作,而另一个表保持了...:

The one on top is the second one, which updates. The one in the bottom is the on i generated first,

这是我的代码:

import random
import dash
from dash.dependencies import Input, Output, State
import dash_table

import dash_html_components as html
import pandas as pd


df = pd.read_csv('.../dummy2_csv.csv')


def maketable(dataf):
    tab = html.Div([dash_table.DataTable(
                id='adding-rows-table',
                editable=True,
                data=dataf.to_dict('rows'),
                columns=[{'name': i, 'id': i} for i in dataf.columns])])
    return tab


app = dash.Dash(__name__)


app.layout = html.Div([
    html.Div(id='my-div'),
    maketable(df),
    html.Button('+', id='editing-rows-button', n_clicks=0),
    html.Button('update', id='btn-save', n_clicks=0)
])



@app.callback(
    Output(component_id='my-div', component_property='children'),
    [Input('btn-save', 'n_clicks'), Input('adding-rows-table', 'data')]
)
def update_output_div(n_clicks, data):
    changed_id = [p['prop_id'] for p in dash.callback_context.triggered][0]
    if 'btn-save' in changed_id:
        df2 = pd.DataFrame(data)

        for col in df2.columns:
            # new values
            df2[col].values[:] = random.randint(0,9)
        df2.to_csv('.../dummy2_csv.csv', encoding='utf-8', index=False)
        return maketable(df2)


@app.callback(
    Output('adding-rows-table', 'data'),
    [Input('editing-rows-button', 'n_clicks')],
    [State('adding-rows-table', 'data'),
     State('adding-rows-table', 'columns')])
def add_row(n_clicks, rows, columns):
    if n_clicks > 0:
        rows.append({c['id']: '' for c in columns})
    return rows


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

在此先感谢您的帮助!

最好,t。

2 个答案:

答案 0 :(得分:1)

我让它起作用

  • 问题出在回调函数中。

检查:

import dash
from dash.dependencies import Input, Output, State
import dash_table
import dash_daq as daq
import dash_bootstrap_components as dbc
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd


df = pd.read_csv('.../dummy2_csv.csv')

body = dbc.Container(
    [
        dbc.Row(
            [
                dash_table.DataTable(id="dash_neu", editable=True, row_deletable=True, columns=[{'name': i, 'id': i} for i in df.columns], data=df.to_dict('records')),
                dbc.Col(html.Button('+', id='editing-rows-button', n_clicks=0)),
                dbc.Col(html.Button('update', id='btn-save', n_clicks=0))
            ]
        )])

app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = html.Div([body])


@app.callback(
    [dash.dependencies.Output("dash_neu", "data"), dash.dependencies.Output("dash_neu", "columns")],
    [Input("btn-save", "n_clicks"), Input('editing-rows-button', 'n_clicks')],
    [State('dash_neu', 'data'), State('dash_neu', 'columns')]
)
def update(button, clicked, data, columns):
    changed_id = [p['prop_id'] for p in dash.callback_context.triggered][0]
    if 'btn-save' in changed_id:
        df = pd.DataFrame(data)
        df.to_csv('.../dummy2_csv.csv', encoding='utf-8', index=False)
        columns = [{'name': i, 'id': i} for i in df.columns]
        data = df.to_dict('records')
        return data, columns
    if 'editing-rows-button' in changed_id:
        if clicked > 0:
             data.append({c['id']: '' for c in columns})
        return data, columns
    return data, columns

答案 1 :(得分:0)

问题似乎是因为您调用了在div外部构建表的函数,该函数从回调中接收表。尝试将布局更改为此:

app.layout = html.Div([
    html.Div(id='my-div', children=[maketable(df)]),
    html.Button('+', id='editing-rows-button', n_clicks=0),
    html.Button('update', id='btn-save', n_clicks=0)
])