破折号回调中的动态数据框和条件样式

问题描述 投票:0回答:1

我是破折号的新手,正在尝试设置我的破折号表的样式,以便突出显示与第一行同一列中的单元格具有不同值的每个单元格。因为我需要在 Kubernetes 中部署 dash 以及其他与路径有关的原因,所以我将 dashapp 作为一个具有巨大的多输入/输出回调的类。 (我知道我也不喜欢它)我正在尝试设置为每个回调动态生成的数据框的样式。

                            html.Div(
                            className="eight columns div-for-charts bg-grey",
                            children=[
                                dcc.Graph(id="graph"),
                                html.Div(
                                    className="text-padding",
                                    children=[
                                        "You can filter the table columns by clicking on the column name.",
                                    ],
                                ),
                                dash_table.DataTable(
                                    id='datatable-interactivity',
                                    columns=[
                                        {"name": i, "id": i, "deletable": False, "selectable": True} for i in
                                        self.predictions.columns
                                    ],
                                    # make header font black
                                    style_header={'color': 'black', 'backgroundColor': 'white'},
                                    style_data={'color': 'black', 'backgroundColor': 'white'},
                                    data=self.predictions.to_dict('records'),
                                    editable=False,
                                    filter_action="native",
                                    sort_mode="multi",
                                    column_selectable="single",
                                    row_selectable="multi",
                                    row_deletable=True,
                                    selected_columns=[],
                                    selected_rows=[],
                                    page_action="native",
                                    page_current=0,
                                    page_size=20,
                                    style_table={'overflowX': 'scroll'},
                                ),

                            ],
                        ),
    def start_callback(self):
        @self.multiple_callbacks.callback(
            [dash.dependencies.Output("graph", "figure"),
             dash.dependencies.Output(component_id="datatable-interactivity", component_property='data'),
             dash.dependencies.Output("datatable-interactivity", "style_data_conditional")],
            [dash.dependencies.Input(component_id='algorithm_dd', component_property='value'),
             dash.dependencies.Input(component_id="graph", component_property="selectedData"),
             dash.dependencies.Input(component_id='value_slider', component_property='value'),
             dash.dependencies.Input(component_id='checklist', component_property='value'),
             dash.dependencies.Input(component_id="datatable-interactivity", component_property="active_cell"),
             ])
                if len(selectedData['points']) == 1:
                    key = selectedData['points'][:]
                    a = key[0]['hovertext']

                    df_f = self.get_nearest_neighbours(self.predictions, hovertexts[0], value_slider, alg_name)
                    selected_row_style =[{"if": {"filter_query": "{{apk_name}} ={}".format(a)}, "backgroundColor": "yellow", }]
                    cell_styles = []
                    for column in df_f.columns:
                        cell_styles.append({
                            'if': {
                                'column_id': column,
                                'filter_query': f'{{{column}}} != {df_f[column].iloc[0]}',
                            },
                            'backgroundColor': 'pink',
                            'color': 'white',
                        })
                    selected_row_style.extend(cell_styles)
                return plot_fig_selected, df_f.to_dict('records'), selected_row_style

注意代码是如何不完整的,但是函数的返回值是正确的,并且它创建了一个字典列表。当我在代码中添加 for 循环部分时,不知何故我的表没有更新。不过,它确实仅使用 selected_row_style 进行更新,并为所选行突出显示黄色。任何帮助深表感谢。代码也没有缩进问题。

python callback plotly plotly-dash
1个回答
0
投票

由于您的代码还没有完成,而且它不是可再生样本,所以请参考下面的代码修改您的代码。

import pandas as pd
import dash_table
import dash
import dash_html_components as html
import dash_core_components as dcc
import dash_bootstrap_components as dbc

df = pd.DataFrame({'num': [1, 2, 1, 3, 1, 5, 1]})
df['matches?'] = df['num'].shift(0)==df['num'].loc[0]
df['matches?'] = df['matches?'].astype(str)

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

#print(df)
app.layout = dash_table.DataTable(
    data=df.to_dict('records'),
    #sort_action='native',
    columns=[{'name': i, 'id': i} for i in df.columns[0:1]],
    style_data_conditional=[
        {'if': {'filter_query': '{matches?} eq "False"',
                'column_id': 'num'
            },
            'color': 'white','backgroundColor':'green'
        },
                {'if': {'filter_query': '{matches?} eq "True"',
                'column_id': 'num'
            },
            'color': 'black','backgroundColor':'white'
        },
        
    ] 
)

if __name__ == '__main__':
    app.run_server(debug=False, port=1213)

如您所见,我们需要先使用

shift
找到不同的单元格,然后使用它来
conditional_formating
dash_table.

© www.soinside.com 2019 - 2024. All rights reserved.