英文:
Dynamic dataframe and conditional styling in dash callbacks
问题
我是新手，尝试为我的数据表格(DashTable)添加样式，使得与同一列第一行中的单元格值不同的每个单元格都会突出显示。因为我需要在Kubernetes上部署Dash，还有一些与路径相关的原因，我将Dash应用程序作为一个具有多个Input/Output回调的类（我知道我也不喜欢它）。我正在尝试为每个回调动态生成的数据帧添加样式。
注意代码不完整，但函数的返回值是正确的，它创建了一个字典列表。当我添加代码中的for循环部分时，我的表格没有更新。但仅使用selected_row_style来突出显示选定行时，它可以更新。非常感谢任何帮助。此外，代码没有缩进问题。
英文:
I am new to dash and trying to style my dashtable so that every cell with a different value from the cell in the same column in the first row gets highlighted. Because I need to deploy dash in Kubernetes and other reasons that have to do with paths I have the dashapp as a class with a giant multiple Input/Output callback. ( I know I don't like it either) I am trying to style a dataframe that is dynamically generated for every callback.
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 inself.predictions.columns],# make header font blackstyle_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
Notice how the code is not complete, but the return values of the function are correct and it creates a list of dictionaries. Somehow my table does not update when I add the for loop part in the code. It does update with only the selected_row_style with the yellow highlighting for the selected row though. Any help is much appreciated. Also there is no indent problem on the code.
答案1
得分: 1
由于您的代码尚未完成，并且不是可复制的示例，请参考以下代码来修改您的代码：
import pandas as pdimport dash_tableimport dashimport dash_html_components as htmlimport dash_core_components as dccimport dash_bootstrap_components as dbcdf = pd.DataFrame({'num': [1, 2, 1, 3, 1, 5, 1]})df['matches?'] = df['num'].shift(1) != df['num']df['matches?'] = df['matches?'].astype(str)app = dash.Dash(__name__, external_stylesheets=[dbc.themes.LUX])app.layout = dash_table.DataTable(data=df.to_dict('records'),columns=[{'name': i, 'id': i} for i in df.columns[0:1]],style_data_conditional=[{'if': {'filter_query': '{matches?} eq "True"', 'column_id': 'num'},'color': 'black', 'backgroundColor': 'white'},{'if': {'filter_query': '{matches?} eq "False"', 'column_id': 'num'},'color': 'white', 'backgroundColor': 'green'}])if __name__ == '__main__':app.run_server(debug=False, port=1213)
如您所见，我们需要首先使用shift找到不同的单元格，然后将其用于dash_table的条件格式化。
英文:
Because of your code still not finish and it's not reproductive sample so please refer below code to revise yours.
import pandas as pdimport dash_tableimport dashimport dash_html_components as htmlimport dash_core_components as dccimport dash_bootstrap_components as dbcdf = 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)
As you see we need to find the different cell first by using shift then use this to conditional_formating dash_table.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论