Plotly Dash：有条件地改变数据表单元格的颜色

Question

我有以下代码：

import dash
import dash_html_components as html
import dash_table
import pandas as pd

df = pd.DataFrame(
    columns = ['col1', 'col2'],
    data=[
        ['aaaa', 5],
        ['aa', 6],
        ['bbbb', 7],
        ['cccc',8]

    ]

)
app = dash.Dash(__name__)

styles = [{'if': {
                        'column_id': 'col1',
                        'filter_query': '{col1} contains {val}'
                    },
                    'backgroundColor': background_color,
                    'color': 'white'
                } for val, background_color in zip(['a', 'b', 'c'], 
                            ['#FF0000', "#00FF00", '#0000FF'])]

app.layout = html.Div([dash_table.DataTable(
        id='table',
        columns=[{"name": i, "id": i} for i in df.columns],
        data=df.to_dict('records'),
        style_cell={'font-family':'sans-serif'},
        style_data_conditional=styles
)])


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

我正在尝试更改 col1 列的背景颜色（如果它包含 a、b 或 c）。我知道我需要使用 style_data_conditional，但不知道如何正确引用列名。有人知道怎么做吗？

Answer 1

代码中过滤器查询的问题是 val 是一个字符串，因此不会根据列表中的值进行更新（即它始终等于 'val'取值 'a'、'b' 和 'c'）。如果您将 val 替换为下面示例中的变量，您的代码应该会按预期工作。

import dash
import dash_html_components as html
import dash_table
import pandas as pd

df = pd.DataFrame(
    columns=['col1', 'col2'],
    data=[['aaaa', 5],
          ['aa',   6],
          ['bbbb', 7],
          ['cccc', 8]]
)

app = dash.Dash(__name__)

styles = [{'if': {'column_id': 'col1', 'filter_query': '{col1} contains ' + val},
'backgroundColor': background_color, 'color': 'white'} for val, background_color
in zip(['a', 'b', 'c'], ['#FF0000', "#00FF00", '#0000FF'])]

app.layout = html.Div([dash_table.DataTable(
        id='table',
        columns=[{'name': i, 'id': i} for i in df.columns],
        data=df.to_dict('records'),
        style_cell={'font-family': 'sans-serif'},
        style_data_conditional=styles
)])

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

Plotly Dash：有条件地改变数据表单元格的颜色

Plotly Dash: Conditionally changing datatable cell color

python

plotly

plotly-dash