plotly - 如何从可编辑表中更新绘图/破折号？

Question

我有一个带有可删除行和列的破折号 DataTable 对象。我想根据可见行更新图形。我不确定如何创建回调以及要传递哪些参数。在浏览器中删除行时，存储在表对象中的数据实际上可能不会更改。

from dash_table import DataTable

def lineplot(id, df, cols, title=None, xlabel=None, ylabel=None, x=None, 
             xaxis_type=None, yaxis_type=None, plotly_config=plotly_config,
            ):

    if x is None:
        x_values = df.index
        xlabel = df.index.name
    else:
        x_values = df[x]

    data = [{
        'x': x_values,
        'y': df[col],
        'name': col }  for col in cols]

    layout = go.Layout(
        title=go.layout.Title(
            text=title,
            xref='paper',
            xanchor='center'
        ),
        xaxis = go.layout.XAxis(
            title=go.layout.xaxis.Title(
                text=xlabel,
                font=plotly_config['font'],

            ),
            type=xaxis_type
        ),
        yaxis=go.layout.YAxis(
            title=go.layout.yaxis.Title(
                text=ylabel,
                font=plotly_config['font'],
            ),
        type=yaxis_type
        ),
        showlegend=True
    )


    return dcc.Graph(
        id=id,
        figure={'data': data,
                'layout': layout},
        style={"max-width": "600px", 
               "margin": "auto", 
               "display": "inline-block"})

def table(id, df):
    dt = DataTable(
        id=id,
        data=df.to_dict('records'),
        columns=[{"name": i, 
                  "id": i, 
                  "deletable": True, 
                  "searchable": True} for i in df.columns], 
        sorting=True, 
        style_cell={
            'minWidth': '0px', 
            'maxWidth': '180px',
            'whiteSpace': 'no-wrap',
            'overflow': 'hidden',
            'textOverflow': 'ellipsis'},
        style_table={'overflowX': 'scroll'},
        row_deletable=True,
        pagination_mode="fe",
        pagination_settings={
                "displayed_pages": 1,
                "current_page": 0,
                "page_size": 15},
        navigation="page"
        )
    return dt

app = dash.Dash(__name__)
app.layout = html.Div(children=[
    table(id='table', df=pd.DataFrame(...)),
    lineplot(id='plot',...)
])

@app.callback(Output('plot', 'data'),
              [Input('table', 'data')])
def update_graph(data):
    return pd.DataFrame(data)

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

Answer 1

I am not sure how to create the callback and what arguments to pass.

您需要的参数必须包含表格中的信息，以便您可以相应地更新图表。您可以在在线文档中找到可以从组件收集的属性: https://dash.plot.ly/datatable/reference .

The data stored in the table object might actually not change when deleting the rows in the browser.

我不确定我是否理解你的意思。如果您通过 Web 界面删除表中的行，则传递给更新函数的数据将发生相应变化，从而可以相应地更新图形。

我对你的代码做了一些调整，让它看起来更自然。在某些地方我不得不做出改变，因为我没有足够的关于你的目标的信息。您可以在下面看到一个工作示例，您必须根据需要对其进行相应调整。我创建了一个硬编码的测试数据框。如果要在运行时加载数据，则需要动态创建它。

from dash_table import DataTable
from dash.dependencies import Input, Output
import dash
import dash_html_components as html
import dash_core_components as dcc
import pandas as pd
import plotly.graph_objs as go


raw_data = {
        'column1': [4, 24, 31, 2, 3],
        'column2': [25, 94, 57, 62, 70]
}
test_df = pd.DataFrame(raw_data)


app = dash.Dash(__name__)
app.layout = html.Div(children=[
    DataTable(
        id='table',
        data=test_df.to_dict('records'),
        columns=[{"name": i,
                  "id": i,
                  "deletable": True,
                  "searchable": True} for i in test_df.columns],
        sorting=True,
        style_cell={
            'minWidth': '0px',
            'maxWidth': '180px',
            'whiteSpace': 'no-wrap',
            'overflow': 'hidden',
            'textOverflow': 'ellipsis'},
        style_table={'overflowX': 'scroll'},
        row_deletable=True,
        pagination_mode="fe",
        pagination_settings={
            "displayed_pages": 1,
            "current_page": 0,
            "page_size": 15},
        navigation="page"
    ),
    dcc.Graph(
        id='plot',
        style={"max-width": "600px",
               "margin": "auto",
               "display": "inline-block"})
])


@app.callback(Output('plot', 'figure'),
              [Input('table', 'data'),
               Input('table', 'columns')])
def update_graph(data, cols):
    df = pd.DataFrame(data, columns=[c['name'] for c in cols])
    x_values = df.index

    data = [{
        'x': x_values,
        'y': df[col['name']],
        'name': col['name']} for col in cols]

    layout = go.Layout(
        title=go.layout.Title(
            text='title',
            xref='paper',
            xanchor='center'
        ),
        xaxis=go.layout.XAxis(
            title=go.layout.xaxis.Title(
                text='x-title'
            ),
            type=None
        ),
        yaxis=go.layout.YAxis(
            title=go.layout.yaxis.Title(
                text='y-title'
            ),
            type=None
        ),
        showlegend=True
    )

    return {"data": data, "layout": layout}


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