使用plotly-dash的“Running”参数时,有没有办法直接引用组件的嵌套属性?例如:
没有嵌套的直接引用(有效 - 但必须提供整个多部分属性):
@app.callback(Output("graph1", "children"), Input("w1_radioSelect", "value"),
running=[
Output("checkbox_selector", "options"),
[{"label": "checkbox label", "value":"value", "disabled":True}, {...Remaining Options' Key-Value Pairs...}],
[{"label": "checkbox label", "value":"value", "disabled":True}, {...Remaining Options' Key-Value Pairs...}]
]
)
使用嵌套直接引用(不起作用 - 寻找某种类型的类似语法......?)
@app.callback(
Output("graph1", "children"), Input("w1_radioSelect", "value"),
running=[Output("checkbox_selector", "options[0].disabled"),True, False]
)
我尝试了上述的一些变体,但没有成功。
从示例中可以明显看出,这是专门参考 dcc.Checklist 项的。我认为没有任何其他方法可以禁用特定选项(除了将相应选项列表条目中的“禁用”键设置为 True 之外),但是如果我在该帐户上错了,请有人纠正我。另外,据我所知,整个清单没有可用的“禁用”参数。
其他参考:请参阅“回调运行时更新组件属性”部分
您可以使用客户端回调一次禁用所有复选框。下面是一个示例,当单选按钮更改时,嵌套在 id checkbox_selector 的 div 元素下的所有复选框都将被禁用。请注意,回调需要一个输出来满足 Dash。
# Disables all of the checkboxes
app.clientside_callback(
"""
function(value) {
const checkboxes = document.querySelectorAll('#checkbox_selector input[type="checkbox"]');
checkboxes.forEach(checkbox => {
checkbox.disabled = true;
});
return '';
}
""",
Output(
"dummy-output", "children"
), # This is a dummy output since clientside_callback requires an output.
Input("w1_radioSelect", "value"),
)
这是一个完整的工作示例:
from dash import Dash, dcc, html, Input, Output
app = Dash(__name__)
app.layout = html.Div(
[
html.H3("Radio Buttons"),
dcc.RadioItems(
id="w1_radioSelect",
options=[
{"label": "Option 1", "value": "1"},
{"label": "Option 2", "value": "2"},
{"label": "Option 3", "value": "3"},
],
value="1",
),
html.H3("Check Boxes"),
html.Div(
id="checkbox_selector",
children=[
dcc.Checklist(
id="checkbox1",
options=[{"label": "Checkbox 1", "value": "1"}],
value=[],
),
dcc.Checklist(
id="checkbox2",
options=[{"label": "Checkbox 2", "value": "2"}],
value=[],
),
],
),
html.Div(id="dummy-output"),
html.Button("Reset", id="reset", style={"margin-top": "20px"}),
]
)
# Disables all of the checkboxes
app.clientside_callback(
"""
function(value) {
const checkboxes = document.querySelectorAll('#checkbox_selector input[type="checkbox"]');
checkboxes.forEach(checkbox => {
checkbox.disabled = true;
});
return '';
}
""",
Output(
"dummy-output", "children"
), # This is a dummy output since clientside_callback requires an output.
Input("w1_radioSelect", "value"),
)
# Enables all of the checkboxes
app.clientside_callback(
"""
function(value) {
const checkboxes = document.querySelectorAll('#checkbox_selector input[type="checkbox"]');
checkboxes.forEach(checkbox => {
checkbox.disabled = false;
});
return {};
}
""",
Output("dummy-output", "style"),
Input("reset", "n_clicks"),
)
if __name__ == "__main__":
app.run_server(debug=True)