首页 > 解决方案 > 关于 Plotly-Dash DataTable 条件格式:如何将特定的选定颜色(dcc.RadioItems f.ex.)分配给单击的 DataTable 单元格?

问题描述

显示dash_table.DataTable带有颜色选择选项的图 1

再一次问好!

所以最近我一直在使用dash_table.DataTables 并且我一直在尝试找到一种方法,如何根据将选择表单selected_cellsDataTable的“颜色按钮”来分配给定的颜色。dcc.RadioItems(见上图)

我应该说这是我一次处理条件格式问题,我不知道如何处理style_data_conditional- 变量。我确实在https://dash.plotly.com/datatable/conditional-formatting中阅读了那篇文档文章,但是根据那里写的关于style_data_conditionalor的内容style_cell_conditional,我只能发现单元格的背景颜色可以根据什么来格式化该单元格所在的列(或行),或通过将值与相邻列的单元格进行比较等。但是我无处可找到selected_cells基于“什么颜色”当前已选择着色(无论是通过值组件) dcc.RadioItems 或复选标记等)

DataTable所以,如果我有这种app.layout

datatable = [
                            dash_table.DataTable( 
                            
                            id='data_table_colored',
                            columns=cols,

                            style_header={
                                'backgroundColor': '#f2f2f2',
                                'fontWeight': 'bold',
                                'textAlign': 'left'
                            },
                            style_table={
                                'maxHeight': '215px',
                            },
                            style_cell={
                                'height': 'auto',
                                # all three widths are needed
                                'minWidth': '50px', 'width': '50px', 'maxWidth': '50px',
                                'whiteSpace': 'normal'
                            },
                            
                            style_data_conditional= [    # just for styling the DataTable ;  a silver-white-color pattern
                                                    {
                                                        'if': {'row_index': i, 'column_id': str(j)},
                                                        'backgroundColor': 'rgb(248, 248, 248)'
                                                    }
                                                    for i in grey_rows1 for j in grey_cols1
                                                                    ] +
                                                  [
                                                    {
                                                        'if': {'row_index': i, 'column_id': str(j)},
                                                        'backgroundColor': 'rgb(248, 248, 248)'
                                                    }
                                                    for i in grey_rows2 for j in grey_cols2
                                                 ],

                                                               ),
                        ]

我使用这个颜色选择开关,就像上图一样:

switch = [
                            dcc.RadioItems(
                                id='colors_switch',
                                options=[
                                    {'label': 'Red', 'value': 'red'},
                                    {'label': 'Green', 'value': 'green'},
                                    {'label': 'Yellow', 'value': 'yellow'},
                                    {'label': 'Blue', 'value': 'blue'},
                                ],
                                value='red',
                                labelStyle={'display': 'inline-block', 'margin': '15px', 'text-align': 'center'},
                                style={'text-align': 'center', 'margin': 'auto'}
                            ),

                ] 

我将如何连接 'colors_switch' - 开关与 'data_table_colored' - DataTable?有什么方法可以控制单击的DataTable单元格的背景颜色 - 通过“值” - 开关的组件,还是完全不可能,我无法通过style_data_conditional/ style_cell_conditional- 格式化或任何其他方式使这个东西工作,我必须以完全不同的方式处理这个问题?

我期待着信息丰富的回复,我非常感谢社区的帮助,我很想听听有人在这类问题上的经验。

干杯!

斯特博尔

编辑:我已经在 StackOverflow 和 community.plotly.com 上搜索了这个特定问题,但我找不到任何与我的问题真正相关的线程。

标签: pythondatatableformattingbackground-colorplotly-dash

解决方案


推荐阅读