当サイトでは実際に購入した商品のみをレビューし、アフェリエイトリンク付きでご紹介しています
【Plotly】グラフの配色を変更する【背景色】
Plotlyは、とても便利なグラフ描画ライブラリです。
今回は、自分のサイトイメージに合わせて、グラフの配色を変更してみましょう。
この記事でわかること
- Plotlyグラフの背景色を変える方法
- Plotlyグラフの折れ線の色を変える方法
目次
解決したい課題と目標
Plotlyを使うと、このようにインタラクティブなグラフをカンタンに作ることができます。
しかし、グラフの配色は、このサイトに合っていません…。
今回は、グラフの背景色と、折れ線の色を変更してみます。
「Plotlyとは、なんぞや？」という方は、まず過去の記事をご覧ください
あわせて読みたい
【Python】Plotly.Expressでインタラクティブな折れ線グラフを作る
Search Consoleのデータを、インタラクティブなグラフにして、WordPressへ表示する方法をご紹介します。Plotly.Expressを使って、とてもカンタンに実現できます。プログ…
Plotlyグラフの配色を変更する
このサイトのメインカラーは、ベージュです。
背景色は薄いベージュ、線の色は少しくすんだ色に、変更してみましょう。
好みの色合いになりました！
このグラフを生成するソースコードは以下の通りです。
import pandas as pd
import plotly.graph_objs as go
from plotly.subplots import make_subplots
#データ読み込み
df = pd.read_csv('★ここは保存したCSVのフルパスに書き換えてください★')
#グラフ作成
fig= make_subplots(specs=[[{"secondary_y": True}]])
fig.add_trace(go.Scatter(x=df["日付"], y=df["クリック数"], name="クリック数", line=dict(color="#51848E")))
fig.add_trace(go.Scatter(x=df["日付"], y=df["表示回数"], name="表示回数", line=dict(color="#8E5184")),secondary_y=True)
fig.update_xaxes(title="日付",showgrid=False)
fig.update_yaxes(title="クリック数", showgrid=False)
fig.update_yaxes(title="表示回数", showgrid=False, secondary_y=True)
fig.update_layout(legend=dict(xanchor='left', yanchor='top',x=0.01, y=0.99,orientation='h'), plot_bgcolor = "#f9f8f5")
fig.to_html(include_plotlyjs='cdn',full_html=False).encode().decode('unicode-escape')デフォルトの配色には、見やすいという良さがあります。
変更後は、サイトイメージに馴染む配色になりました。
配色を変更する
配色を変更している箇所がわかりません
配色の変更方法について、解説します！
背景色を変える（plotly_bgcolor, paper_bgcolor）
Plotlyでは、Plotlyグラフの背景色と、全体の背景色を変更することができます。
実際にやってみましょう
fig.update_layout(plotly_bgcolor="white", # ①：グラフの背景色
paper_bgcolor="grey" # ②：全体の背景色
))- ①：plotly_bgcolor
-
Plotlyグラフの背景色（background color）を変更します。
下のグラフで白い色になっている部分です。
- ②：paper_bgcolor
-
全体の背景色を変更します。
下のグラフで、灰色になっている部分です。
線の配色（color）
fig.add_trace(go.Scatter(x=df["日付"], y=df["クリック数"], name="クリック数", line=dict(color="#51848E")))
fig.add_trace(go.Scatter(x=df["日付"], y=df["表示回数"], name="表示回数", line=dict(color="#8E5184")),secondary_y=True)線の配色は、折れ線を生成するときに、colorプロパティで指定しましょう。
色の指定方法
Plotlyでは、HTMLやCSSと同じように３種類の方法で色を指定することができます。
色名
fig.update_layout( plotly_bgcolor="white" )16進数
fig.update_layout( plotly_bgcolor="#ffffff" )RGB
fig.update_layout( plotly_bgcolor="rgb(255,255,255)" )この３つの実行結果は、すべて同じです
HTMLで使用できる色名や、16進数・RGB値を知りたいときは、以下のサイトが参考になるかと思います。
まとめ
毎月のアクセス状況を公開するため、Plotlyを使って、インタラクティブなグラフを作成しています。
あわせて読みたい
【運営報告】ブログの記録（2021年7月）
2021年7月のブログの運営報告をまとめます。 この記事でわかること ブログ記事数=約25では、どのくらいのアクセスがあるのか 【はじめに】 このブログは、2021年の年…
Plotlyの使い方を覚えつつ、どんどん「より良いもの」にしていきたいです。
グラフの作り方について知りたい方は、過去の記事もご参照ください。
あわせて読みたい
【Python】Plotlyで２軸の折れ線グラフを作る方法
Plotlyで、インタラクティブな2軸のグラフを作りたい！ PythonのPlotlyライブラリを使用して、インタラクティブなグラフを作成します。 数値が離れた２つデータを使…
あわせて読みたい
【Plotlyグラフ】凡例（ラベル）の表示位置を変える【レイアウト】
Plotlyの凡例（ラベル）は、デフォルトではグラフの右横に表示されます。 これによって、グラフの横幅が短くなってしまいます。 グラフの表示幅を広げて見やすく…
最後まで読んでいただき、ありがとうございました。
みなさまの暮らしがより良くなりますように。