Dash：如何通过 CSS 控制图形样式？

Question

我有一个简单的 Dash 应用程序，我想通过 CSS 设置绘图的字体和颜色。这是我的app.py样子：

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objects as go

def generate_plot():
    fig = go.Figure()
    fig.add_trace(go.Scatter(x=[1, 2, 3], y=[1, 2, 3]))
    return fig

app = dash.Dash(__name__)
app.layout = html.Div(children=[
    html.H1(children="title", className="title"),
    dcc.Graph(figure=generate_plot(), class="plot")
])

我还有一个文件assets/style.css ，我想用描述dcc.Graph对象外观的内容扩展这个文件。这可能吗？如果是，那我该怎么做？我希望能够设置字体、背景颜色、线条/标记颜色等。不幸的是，类似.plot { background-color: aqua; }CSS 的东西没有效果。此外，html, body {font-family: serif; }也没有任何影响。

Answer 1

我通过以下方式在仅开发的基础上解决了其中一些问题：

1. 我将 CSS 文件托管在与 dash Flask 服务器不同的网络服务器上。这对于生产架构来说似乎是合理的，但在开发环境中却很混乱，因为必须在 url 中指定 Web 服务器地址才能使用与开发 Flask 服务器不同的端口（例如默认端口:8050）。

app.css.append_css(dict(external_url='http://localhost/style.css'))

2. 使用这个 css 文件，我可以设置 Dash 页面的一些基于样式的元素，例如

html { background-color: aqua;}

3. 我还无法在所有自动生成的组件中找到或设置 CSS 样式，但是有一些钩子可以直接设置许多样式元素。有关更多信息，请参阅https://plotly.com/python/reference/#scatter。将适合我的代码拼接到您的示例中，这应该可以工作：

fig.add_trace(go.Scatter(x=[1, 2, 3], y=[1, 2, 3], textfont={'family': 'serif'}))