web-dev-qa-db-ja.com

ダッシュ：CSSを介してグラフスタイルを制御する方法？

シンプルな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オブジェクトがどのように見えるかを説明するコンテンツでこのファイルを拡張したいと思います。これは可能ですか？もしそうなら、どうすればいいですか？フォント、背景色、ライン/マーカーの色などを設定できるようにしたいと思います。残念ながら、CSSの.plot { background-color: aqua; }のようなものは効果がありません。また、html, body {font-family: serif; }も無効です。

pythoncssplotlyplotly-dash
4
IVR

私はこれらの問題のいくつかを、開発のみをベースとして、以下を介して対処しました：

  1. ダッシュFlaskサーバーとは異なるWebサーバーでCSSファイルをホストします。これは、本番環境のアーキテクチャでは妥当なようですが、開発環境では、Webサーバーのアドレスを次のURLで指定する必要があるため、面倒ですdev Flask server（例：_:8050_ default））とは異なるポートを使用するため。

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

  1. このcssファイルを使用して、ダッシュページのいくつかのスタイルベースの要素を設定できます。

_html { background-color: aqua;}_

  1. 自動生成されたすべてのコンポーネントでCSSスタイルを検索または設定することはまだできていませんが、多くのスタイル要素を直接設定するためのフックがあります。詳細は https://plotly.com/python/reference/#scatter を参照してください。私に役立つコードをあなたの例につなげると、これはうまくいくはずです：

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

1
Joel Aufrecht