MENU

    【Plotly】グラフの配色を変更する【背景色】

     Plotlyは、とても便利なグラフ描画ライブラリです。

     今回は、自分のサイトイメージに合わせて、グラフの配色を変更してみましょう。

    この記事でわかること
    • Plotlyグラフの背景色を変える方法
    • Plotlyグラフの折れ線の色を変える方法
    目次

    解決したい課題と目標

     Plotlyを使うと、このようにインタラクティブなグラフをカンタンに作ることができます。

     しかし、グラフの配色は、このサイトに合っていません…。

     今回は、グラフの背景色と、折れ線の色を変更してみます。

     

    「Plotlyとは、なんぞや?」という方は、まず過去の記事をご覧ください

    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と同じように3種類の方法で色を指定することができます。

    色名

    fig.update_layout( plotly_bgcolor="white" )

    16進数

    fig.update_layout( plotly_bgcolor="#ffffff" )

    RGB

    fig.update_layout( plotly_bgcolor="rgb(255,255,255)" )
     

    この3つの実行結果は、すべて同じです

     HTMLで使用できる色名や、16進数・RGB値を知りたいときは、以下のサイトが参考になるかと思います。

    猫の挿絵

    まとめ

     毎月のアクセス状況を公開するため、Plotlyを使って、インタラクティブなグラフを作成しています。

     Plotlyの使い方を覚えつつ、どんどん「より良いもの」にしていきたいです。

     グラフの作り方について知りたい方は、過去の記事もご参照ください。

     最後まで読んでいただき、ありがとうございました。
     みなさまの暮らしがより良くなりますように。

    お役に立てたら幸いです
    目次
    閉じる