javascript - React Plotly JS 应用深色(plotly_dark)主题

Question

使用 React Plotly Js图书馆。需要稳健的解决方案而不是通过 plot_bgcolor和 paper_bgcolor用于创建深色主题图表。找不到与 javascript 主题相关的文档。
我知道通过更改 plot_bgcolor 创建深色主题的 Plotly 图表, paper_bgcolor和其他内部属性。
但是，此方法的结果看起来不如使用 plotly python 版本中可用的默认深色主题生成的图表好。
根据 Plotly python doc将主题名称传递给图形对象就足以改变主题。

import plotly.express as px

df = px.data.gapminder()
df_2007 = df.query("year==2007")

for template in ["plotly", "plotly_white", "plotly_dark", "ggplot2", "seaborn", "simple_white", "none"]:
    fig = px.scatter(df_2007,
                     x="gdpPercap", y="lifeExp", size="pop", color="continent",
                     log_x=True, size_max=60,
                     template=template, title="Gapminder 2007: '%s' theme" % template)
    fig.show()

根据上述文档，python 版本附带内置主题 ('ggplot2', 'seaborn', 'simple_white', 'plotly','plotly_white', 'plotly_dark', 'presentation', 'xgridoff','ygridoff', 'gridon')。
我希望，我可以在我的网站中使用其中一个主题(plotly_dark)。
我尝试在 Plotly javascript 中搜索类似的功能。我得到的最接近的是Javascript layout template .但是没有提到使用内置主题。
我正在寻找类似于 python 主题模板的东西，我可以通过 React Plotly js 库使用它。
这是博客链接Introducing plotly.py Theming讨论 2018 年发布的 python 主题功能。
这是生成 plotly.py definitions.py 的主题模板的 python 文件的 github 链接
这是codeandbox https://codesandbox.io/s/react-plotly-y9ifj9?file=/src/App.js的链接包含 react plotly 网站上提供的示例代码。
请帮我指出正确的方向

Answer 1

这是一个很好的问题。像你一样，我在 Javascript 代码中找不到对内置主题的任何引用。所以这是我在 Javascript 中获取深色主题的粗略解决方法:
您提到的博客文章包含指向示例笔记本的链接:
http://nbviewer.jupyter.org/github/jonmmease/plotly.py_release_notebooks/blob/master/notebooks/v3.4.0/templates-gapminder.ipynb
如果您运行此笔记本，则可以使用以下代码从深色主题图表中获取 JSON 数据:

fig_plotly_dark = go.FigureWidget(fig)
fig_plotly_dark.layout.template = 'plotly_dark'
fig_plotly_dark.to_plotly_json()["layout"]["template"]

(您可能必须将 python 的“True”替换为“true”才能获得有效的 json。)
然后可以通过将提取的模板分配给 layout.template 来在 Javascript/React Plotly 图表中使用提取的模板。属性(property)。
看到这个jsFiddle:https://jsfiddle.net/3hfq7ast/