Dash plotly 数据表列过滤或裁剪

Question

我已经实现了一个实时更新数据表来对应一个实时更新图表。在功能上，两者都工作得很好。我在过滤数据表以包含某些列并排除其他列时遇到问题。对于前。如果图表针对某个 x 值 (09:00-10:00) 放大，有没有什么方法可以裁剪相应的数据表以表示来自相同值的列？也许添加一个带有删除特定列 ID 的回调的按钮？有没有办法在不使用 GUI 的情况下通过 python 删除特定的 'column' 'id' 输入？截至目前，我只能手动删除单个列，考虑到列的数量，这非常繁琐。谢谢你。希望这个问题不要太开放。

table_contents = ['Propofol/Remi @ 6.5 ug/ml', 'Fentanyl (ug)', 'Propofol (mg)', 'Remi (ug)',
                  'Ketorolac (mg)']

html.Div([dash_table.DataTable(
        id='editing-columns',
        columns=[{
            'name': 'Parameter',
            'id': 'column1',
            'deletable': True,
            'renamable': True
        }],
        data=[
            {'column1': j}
            for j in table_contents
        ],
        editable=True,
    )]),

# The callback stores the previous length of the csv file in dcc.store and appends new columns if new csv data uploaded
@app.callback(Output('editing-columns', 'columns'),
             [Input('graph-update', 'n_intervals')],
              [State('editing-columns', 'columns')],
              [State('mystore', 'data')])
def update_columns(n, btn, existing_columns, data):
   
            with open('temp.csv', 'r') as rf:
                reader = csv.reader(rf)
                for a in reader:
                    existing_columns.append({
                        'id': a[3], 'name': a[3],
                        'renamable': True, 'deletable': True
                })

            return existing_columns, html.Div('Program running')

        else:
            check_length = []
            de_serialized = json.loads(data)
            with open('temp.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, html.Div('Program running')

            elif len(check_length) > len(de_serialized):
                existing_columns.append({
                    'id': check_length[-1], 'name': check_length[-1],
                    'renamable': True, 'deletable': True
                })
                return existing_columns, html.Div('Program running')

            else:
                return existing_columns, html.Div('Program running')

#The graph is a bar and scatter graph that is updated with x,y values derived from the same csv as the datatable.
@app.callback(
    dash.dependencies.Output('live-graph', 'figure'),
    [dash.dependencies.Input('graph-update-BP', 'n_intervals')],
)
def update_graph_scatter_1(btn, n):
        trace = []
        trace2 = []

        blood_pressure = []
        hr = []
 with open('temp.csv', 'r') as rf:
            reader_2 = csv.reader(rf)
            for a in reader_2:
                blood_pressure.append(eval(a[4]))
                time.append(a[3])
        for i in range(0, len(blood_pressure)):
            trace.append(go.Box(y=blood_pressure[i],
                                x=triple_time[i],
                                line=dict(color='#6a92ff'),
                                hoverinfo='all'))
        for a in range(0, len(hr)):
            trace2.append(go.Scatter(y=coated_hr[a],
                                     x=coated_time[a],
                                     name='HR',

Answer 1

无论何时平移或缩放，都会触发 relayoutData 交互，从那里您可以获取轴范围。

The dcc.Graph component has four attributes that can change through user-interaction: hoverData, clickData, selectedData, relayoutData. These properties update when you hover over points, click on points, or select regions of points in a graph. https://dash.plotly.com/interactive-graphing

import json

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
from dash.exceptions import PreventUpdate
import plotly.express as px
import pandas as pd

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

df = pd.DataFrame({
    "x": [1,2,1,2],
    "y": [1,2,3,4],
    "customdata": [1,2,3,4],
    "fruit": ["apple", "apple", "orange", "orange"]
})

fig = px.scatter(df, x="x", y="y", color="fruit", custom_data=["customdata"])
fig.update_traces(marker_size=20)


app.layout = html.Div([
    dcc.Graph(
        id='basic-interactions',
        figure=fig
    ),

    html.Div(className='row', children=[

        html.Div([
            dcc.Markdown("""
                **Zoom and Relayout Data**

                Click and drag on the graph to zoom or click on the zoom
                buttons in the graph's menu bar.
                Clicking on legend items will also fire
                this event.
            """),
            html.Pre(id='relayout-data'),
        ])
    ])
])



@app.callback(
    Output('relayout-data', 'children'),
    Input('basic-interactions', 'relayoutData'))
def display_relayout_data(relayoutData):
    if relayoutData is None:
        raise PreventUpdate
    elif "xaxis.range[0]" not in relayoutData.keys():
        raise PreventUpdate
    else:
    #get the relevant axis ranges, you can use to drop columns from the datatable
        print(relayoutData,type(relayoutData))
        return json.dumps(relayoutData, indent=2)


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

Dash plotly 数据表列过滤或裁剪

Dash plotly Datatable column filtering or cropping

plotly-dash