动态改变“模板”layout.updatemenus[] Dropdown

Question

我有一个 Python Dash 应用程序，它显示一个 Plotly graph_object.timeline 只有一个轨迹（我认为这个问题不应该取决于轨迹的数量）。 我想要一个 layout.updatemenus 下拉按钮，允许我更改图形的模板（在“plotly”、“plotly_white”、“plotly_dark”等之间）

这是我一直在尝试的最小可重现代码。

import pandas as pd
import plotly.express as px
import plotly.graph_objects as go
from dash import Dash, dcc, html

# import plotly.io as pio
# pio.templates.default = "ggplot2"

df = pd.DataFrame([
    dict(Task="Job A", Start='2009-01-01', Finish='2009-02-28', Resource="Alex"),
    dict(Task="Job B", Start='2009-03-05', Finish='2009-04-15', Resource="Alex"),
    dict(Task="Job C", Start='2009-02-20', Finish='2009-05-30', Resource="Max")
])

# fig = go.Figure()
fig = px.timeline(df, x_start="Start", x_end="Finish", y="Resource", color="Resource")

fig.update_layout(updatemenus=[
        dict(
          active=1,
          showactive=True,
          buttons=list(
            [
              dict(args=[{"type": "line", 'xbins.size': 900000}, ],label="15Min"),
              dict(args=[{"type": "histogram",'xbins.size': 3600000}, ],label="Hour", method="update")
            ]
              ),
          font=dict(color="black", size=12)
        ),
        dict(
          direction="right",
          active=1, #0,
          showactive=True,
          buttons=list(
            [
              dict(args=[{"template": 'plotly_white'}], label="White",method="relayout"),
              dict(args=[{"template": 'plotly_dark'}], label="Dark",method="relayout")
            ]
          ),
          font=dict(color="black")
        )
    ]
  )

# fig.update_layout(template="plotly_dark")

app = Dash()
app.layout = html.Div([
    dcc.Graph(id = 'my_graph',figure=fig)
])

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

虽然第一个按钮列表有效，但第二个按钮列表无效。 每当我选择一个选项时，模板都会设置为“plotly_white”。所以起初（从一个深色模板开始）它似乎有效。但是无论我设置为默认模板，无论我设置无花果布局的模板，以及我在按钮列表中放置的任何选项，当第一次选择一个选项时，模板总是设置为“plotly_white”，并为第二次和随后的时间没有任何反应（它始终保持为“plotly_white”。

任何帮助或提示将不胜感激。

注意：我找到了一个解决方案更改模板使用

from dash_bootstrap_templates import ThemeSwitchAIO

但如果可能的话，我宁愿选择使用 updatemenus 的替代方法。

Answer 1

这是因为前端 (plotly.js) 不知道那些特定于 plotly.py 的模板名称及其各自的配置，因此它需要一个定义模板的对象而不是引用它的字符串。

要解决此问题，您需要使用 plotly.io 在按钮 args 中传递完整的模板对象，如下所示：

# updatemenus button config 
buttons=[
    dict(args=['template', pio.templates['plotly_white']], label="White", method="relayout"),
    dict(args=['template', pio.templates['plotly_dark']], label="Dark", method="relayout")
],

作为参考，这里是在使用 python 包时生成并提供给前端的 template configuration objects。