カテゴリー

当サイトはアフィリエイトプログラムによる収益を得ています〈景品表示法に基づく表記です)

Plotly全般

【plotly&config】グラフのツールバーを編集する

2021年4月7日

こんな人にオススメ

plotlyでグラフを作成すると右上に灰色のバーみたいなものが出てくる。

画像をダウンロードできたりするけど、これって一体なんなの?削除とか追加ってできるの?

ということで、今回はplotlyでグラフを作成したときに右上に出る灰色のバー(config)について解説する。

configはいわばツールバーみたいなもの。このツールバーを活用することで、より便利にグラフの解析を行うことができる。

なお、configについてはplotly公式の「Configuration in Python」にて解説されているけど、より詳細なことを知りたい場合はGitHubを参照する必要がある。

本記事では上記の公式の解説を軸に情報を追加したりしながら解説する。

python環境は以下。

  • Python 3.10.1
  • matplotlib 3.5.1
  • plotly 5.4.0
  • plotly-orca 3.4.2

運営者のメガネです。YouTubeTwitterInstagram、自己紹介はこちら、お問い合わせはこちらから。

運営者メガネ

作成したコード全文

下準備(import

import matplotlib.pyplot as plt
import plotly.graph_objects as go
import plotly.io as pio

まずは下準備としてのimport関連。pltは、plltのグラフを描いたときのツールバーの例として示すだけで本記事のメインではない。

今回はpltolygoの散布図go.Scatterを使ってグラフを作成する。go.Scatterについての記事は以下。

【plotly&go.Scatter】plotlyの散布図グラフの描き方

続きを見る

pioはグラフ保存用のライブラリ。pioの設定などは以下の記事参照。

plotlyでグラフを静止画として保存する際に出るポップアップ
【plotly&orca】plotlyで静止画保存(orca)

続きを見る

pltでツールバーを見てみる

まずはpythonでよく使われるpltでグラフを描く。pltのバージョン違いかpython自体のバージョン違いなのか、グラフ化した時の見た目が大きく異なるが、執筆者環境だと上のようなグラフが表示される。

pltの場合はグラフの下にツールバーが表示され、左から「初期表示に戻る」「前の状態に戻る」「前の状態を取り消す」「移動モード」「拡大モード」「余白の調節」「グラフの保存」となる。

import matplotlib.pyplot as plt

# pltでグラフを作成
x = [1, 2, 3]
y = [1, 3, 1]
plt.plot(x, y)
plt.show()

config設定なしのグラフ]


まずはconfigの設定なしのグラフ。plotlyのバージョンによっては表示されないツールバーがあるかもしれない。表示されるツールバーは以下。

  • カメラマーク: グラフの保存
  • 虫眼鏡: ズームモード
  • 十字キー: 移動モード
  • 点線の四角: 四角形の作成
  • 楕円: 投げ縄の作成
  • +四角: ズームイン
  • -四角: ズームアウト
  • バツ: オートスケール
  • 家: 元のスケール
  • plotlyロゴ: plotlyページ

このグラフをベースにconfigを追加したり削除したりすることにする。なお、plotlygoを使った散布図の描き方とfig.update_layoutについては以下。

【plotly&go.Scatter】plotlyの散布図グラフの描き方

続きを見る

【plotly&fig作成と更新】add_traceやupdate_layoutの使い方

続きを見る

import plotly.graph_objects as go
import plotly.io as pio

# ただグラフ化

x = [1, 2, 3]
y = [1, 3, 1]
fig = go.Figure(data=go.Scatter(x=x, y=y))
# グラフ全体とホバーのフォントサイズ変更
fig.update_layout(font_size=20, hoverlabel_font_size=20)
fig.show()

# グラフ保存
prefix = 'plotly-config'  # 保存ファイル名の接頭辞
save_name = f"{prefix}_simple"
pio.orca.config.executable = '/Applications/orca.app/Contents/MacOS/orca'
pio.write_html(fig, f"{save_name}.html")
pio.write_image(fig, f"{save_name}.png")

scrollZoomでスクロールすると拡大・縮小可能なグラフ


次にスクロール可能なグラフを作成。configdictの中でさらにdictを作成することで設定できる。スクロール可能にするにはscrollZoom=Trueにする。

また、configを反映させるためにグラフ化する際のfig.show()に引数configにここで設定したscrollZoomを適用させる。

グラフを表示するだけならこれでいいが、htmlファイルに保存する際にも引数configを使って設定を反映させる必要がある。

import plotly.graph_objects as go
import plotly.io as pio

# スクロールでズーム可能にする

# configの設定
# スクロールでグラフのズームを可能に
config = dict({'scrollZoom': True})

x = [1, 2, 3]
y = [1, 3, 1]
fig = go.Figure(data=go.Scatter(x=x, y=y))
# グラフ全体とホバーのフォントサイズ変更
fig.update_layout(font_size=20, hoverlabel_font_size=20)

# fig.show()にconfigの設定を反映させる
fig.show(config=config)

# グラフ保存
prefix = 'plotly-config'  # 保存ファイル名の接頭辞
save_name = f"{prefix}_scrollZoom"
pio.orca.config.executable = '/Applications/orca.app/Contents/MacOS/orca'
pio.write_html(fig, f"{save_name}.html", config=config)
pio.write_image(fig, f"{save_name}.png")

responsiveでグラフのサイズを固定


responsive=Falseにするとグラフのサイズを固定できる。通常のグラフだと表示するブラウザのウィンドウサイズを変更すると、グラフもそのウィンドウサイズに応じて形が変わる。

一方で、responsive=Falseにするとウィンドウサイズを変更しても最初に表示したグラフのサイズを維持し続ける。

すなわち、初めに表示したウィンドウサイズが縦長なら、そのウィンドウを横長にしてもグラフは縦長のまま。逆もまた然り。

import plotly.graph_objects as go
import plotly.io as pio

# ブラウザウィンドウのサイズに関わらない固定サイズのグラフ

# configの設定
# 初めに表示したブラウザウィンドウのサイズを基準にする
config = dict({'responsive': False})

x = [1, 2, 3]
y = [1, 3, 1]
fig = go.Figure(data=go.Scatter(x=x, y=y))
# グラフ全体とホバーのフォントサイズ変更
fig.update_layout(font_size=20, hoverlabel_font_size=20)

# fig.show()にconfigの設定を反映させる
fig.show(config=config)

# グラフ保存
prefix = 'plotly-config'  # 保存ファイル名の接頭辞
save_name = f"{prefix}_responsive"
pio.orca.config.executable = '/Applications/orca.app/Contents/MacOS/orca'
pio.write_html(fig, f"{save_name}.html", config=config)
pio.write_image(fig, f"{save_name}.png")

staticPlotで静止画にする


staticPlot=Trueにするとレスポンシブル機能が失われ静止画となる。これを使う機会があるかわからないが、できるのはできる。

import plotly.graph_objects as go
import plotly.io as pio

# 静止画にする

# configの設定
# staticPlot=Trueにすると画像にほぼ画像
config = dict({'staticPlot': True})

x = [1, 2, 3]
y = [1, 3, 1]
fig = go.Figure(data=go.Scatter(x=x, y=y))
# グラフ全体とホバーのフォントサイズ変更
fig.update_layout(font_size=20, hoverlabel_font_size=20)

# fig.show()にconfigの設定を反映させる
fig.show(config=config)

# グラフ保存
prefix = 'plotly-config'  # 保存ファイル名の接頭辞
save_name = f"{prefix}_scrollZoom"
pio.orca.config.executable = '/Applications/orca.app/Contents/MacOS/orca'
pio.write_html(fig, f"{save_name}.html", config=config)
pio.write_image(fig, f"{save_name}.png")

displaylogoplotlyのロゴを消す


displaylogo=Trueにすることでconig一番右のplotlyのロゴを消すことができる。間違えて押した時に画面遷移するのが嫌な時などに使えば良いだろう。

import plotly.graph_objects as go
import plotly.io as pio

# plotlyのロゴを隠す

# configの設定
# 一番右のplotlyロゴを隠せる
config = dict({'displaylogo': False})

x = [1, 2, 3]
y = [1, 3, 1]
fig = go.Figure(data=go.Scatter(x=x, y=y))

# fig.show()にconfigの設定を反映させる
fig.show(config=config)

# グラフ保存
prefix = 'plotly-config'  # 保存ファイル名の接頭辞
save_name = f"{prefix}_displaylogo"
pio.orca.config.executable = '/Applications/orca.app/Contents/MacOS/orca'
pio.write_html(fig, f"{save_name}.html", config=config)
pio.write_image(fig, f"{save_name}.png")

modeBarButtonsToRemoveでボタンを削除


ロゴ以外のボタンも消したい場合はmodeBarButtonsToRemoveで各ボタンを指定すればいい。ここでは全てのボタンを削除した。

こうするとロゴだけが残るので、ロゴも消したい場合は先ほどのdisplaylogo=Falseにすると良い。

import plotly.graph_objects as go
import plotly.io as pio

# モードバーからボタンを消す

# configの設定
# デフォルトで備わっているボタンを削除
config = dict(
    {'modeBarButtonsToRemove': [
        'toImage',  # 画像ダウンロード
        'zoom2d',  # ズームモード
        'pan2d',  # 移動モード
        'select2d',  # 四角形で選択
        'lasso2d',  # ラッソで選択
        'zoomIn2d',  # 拡大
        'zoomOut2d',  # 縮小
        'autoScale2d',  # 自動範囲設定
        'resetScale2d',  # 元の縮尺
    ]}
)

x = [1, 2, 3]
y = [1, 3, 1]
fig = go.Figure(data=go.Scatter(x=x, y=y))

# fig.show()にconfigの設定を反映させる
fig.show(config=config)

# グラフ保存
prefix = 'plotly-config'  # 保存ファイル名の接頭辞
save_name = f"{prefix}_modeBarButtonsToRemove"
pio.orca.config.executable = '/Applications/orca.app/Contents/MacOS/orca'
pio.write_html(fig, f"{save_name}.html", config=config)
pio.write_image(fig, f"{save_name}.png")

modebar_removeでボタンを削除


なお、configを使わなくてもレイアウトの引数modebar_removeでもボタンを削除することが可能。詳しくはPlotly公式の「Python Figure Reference: layout」のmodebar_removeの項目をチェック。

import plotly.graph_objects as go
import plotly.io as pio

# fig.update_layoutでモードバーのボタンを消す
# <https://plotly.com/python/reference/layout/#layout-modebar-remove>

x = [1, 2, 3]
y = [1, 3, 1]
fig = go.Figure(data=go.Scatter(x=x, y=y))

# fig.update_layoutから削除も可能
fig.update_layout(modebar_remove=[
    'toImage',  # 画像ダウンロード
    'zoom2d',  # ズームモード
    'pan2d',  # 移動モード
    'select2d',  # 四角形で選択
    'lasso2d',  # ラッソで選択
    'zoomIn2d',  # 拡大
    'zoomOut2d',  # 縮小
    'autoScale2d',  # 自動範囲設定
    'resetScale2d',  # 元の縮尺
])
# グラフ全体とホバーのフォントサイズ変更
fig.update_layout(font_size=20, hoverlabel_font_size=20)
fig.show()

# グラフ保存
prefix = 'plotly-config'  # 保存ファイル名の接頭辞
save_name = f"{prefix}_modebar_remove"
pio.orca.config.executable = '/Applications/orca.app/Contents/MacOS/orca'
pio.write_html(fig, f"{save_name}.html")
pio.write_image(fig, f"{save_name}.png")

modeBarButtonsToAddでボタンを追加


一方でmodeBarButtonsToAddでボタンを追加することも可能。追加した内容は以下。

  • drawline: 直線
  • drawopenpath: 自由な線
  • drawclosedpath: 閉じたフリーフォーム
  • drawcircle: 円
  • drawrect: 四角
  • eraseshape: 図形の削除
  • toggleSpikelines: ホバーしたプロットに垂直・水平な線
  • hoverclosest: 直近のプロット1点をホバー
  • hovercompare: 直近のプロットと同じxのプロット全点をホバー

また、最後の3つ「toggleSpikelines」「hoverclosest」「hovercompare」の使い勝手を確かめるためにプロットするグラフは2種類にした。

import plotly.graph_objects as go
import plotly.io as pio

# モードバーにボタンを追加

# configの設定
# ボタンを追加
config = dict(
    {'modeBarButtonsToAdd': [
        'drawline',  # 直線
        'drawopenpath',  # 自由な線
        'drawclosedpath',  # 閉じたフリーフォーム
        'drawcircle',  # 円
        'drawrect',  # 四角
        'eraseshape',  # 図形の削除
        'toggleSpikelines',  # ホバーしたプロットに垂直・水平な線
        'hoverclosest',  # 直近のプロット1点をホバー
        'hovercompare',  # 直近のプロットと同じxのプロット全点をホバー
    ]}
)

x = [1, 2, 3]
y1 = [1, 3, 1]
y2 = [2, 3, 2]
fig = go.Figure(
    data=[
        go.Scatter(x=x, y=y1, name='data1'),
        go.Scatter(x=x, y=y2, name='data2'),
    ]
)
# グラフ全体とホバーのフォントサイズ変更
fig.update_layout(font_size=20, hoverlabel_font_size=20)

# fig.show()にconfigの設定を反映させる
fig.show(config=config)

# グラフ保存
prefix = 'plotly-config'  # 保存ファイル名の接頭辞
save_name = f"{prefix}_modeBarButtonsToAdd"
pio.orca.config.executable = '/Applications/orca.app/Contents/MacOS/orca'
pio.write_html(fig, f"{save_name}.html", config=config)
pio.write_image(fig, f"{save_name}.png")

modebar_addでボタンを追加


こちらもレイアウトの引数modebar_addでボタンを追加することが可能。詳しくはPlotly公式の「Python Figure Reference: layout」のmodebar_addの項目をチェック。

import plotly.graph_objects as go
import plotly.io as pio

# fig.update_layoutでモードバーのボタンを追加
# <https://plotly.com/python/reference/layout/#layout-modebar-add>

x = [1, 2, 3]
y1 = [1, 3, 1]
y2 = [2, 3, 2]
fig = go.Figure(
    data=[
        go.Scatter(x=x, y=y1, name='data1'),
        go.Scatter(x=x, y=y2, name='data2'),
    ]
)

# fig.update_layoutから追加も可能
fig.update_layout(modebar_add=[
    'drawline',  # 直線
    'drawopenpath',  # 自由な線
    'drawclosedpath',  # 閉じたフリーフォーム
    'drawcircle',  # 円
    'drawrect',  # 四角
    'eraseshape',  # 図形の削除
    'toggleSpikelines',  # ホバーしたプロットに垂直・水平な線
    'hoverclosest',  # 直近のプロット1点をホバー
    'hovercompare',  # 直近のプロットと同じxのプロット全点をホバー
])
# グラフ全体とホバーのフォントサイズ変更
fig.update_layout(font_size=20, hoverlabel_font_size=20)
fig.show()

# グラフ保存
prefix = 'plotly-config'  # 保存ファイル名の接頭辞
save_name = f"{prefix}_modebar_add"
pio.orca.config.executable = '/Applications/orca.app/Contents/MacOS/orca'
pio.write_html(fig, f"{save_name}.html", config=config)
pio.write_image(fig, f"{save_name}.png")

doubleClickDelayでダブルクリックの遅延時間を変更


ダブルクリックの反応時間を変更したいときはdoubleClickDelayを使う。デフォルトは300 msに相当する300で、最初のクリックから300 ms以内に次のクリックをするとダブルクリックの判定となる。

一方で、今回のグラフだとdoubleClickDelay=1000にしているので1000 msすなわち1秒間はダブルクリックまでの時間が許容されることになる。

なのでかなりゆっくりクリックしてもダブルクリック判定となるのがわかるだろう。

import plotly.graph_objects as go
import plotly.io as pio

# ダブルクリックの間隔を変更

# configの設定
# 許容されるダブルクリックの間隔を長くした
# クリックしてからしばらくしてクリックしてもダブルクリック判定となる
config = {'doubleClickDelay': 1000}  # デフォルトは300

x = [1, 2, 3]
y = [1, 3, 1]
fig = go.Figure(data=go.Scatter(x=x, y=y))
# グラフ全体とホバーのフォントサイズ変更
fig.update_layout(font_size=20, hoverlabel_font_size=20)

# fig.show()にconfigの設定を反映させる
fig.show(config=config)

# グラフ保存
prefix = 'plotly-config'  # 保存ファイル名の接頭辞
save_name = f"{prefix}_doubleClickDelay"
pio.orca.config.executable = '/Applications/orca.app/Contents/MacOS/orca'
pio.write_html(fig, f"{save_name}.html", config=config)
pio.write_image(fig, f"{save_name}.png")

editableでグラフを編集可能にする


editable=Trueにすると軸ラベルや凡例の名称(プロット名)、それに凡例の位置も変更可能になる。後から内容を変更したいときや凡例の位置を変更したいときに重宝する。

ただ、凡例の位置を変更できるけど、位置はグリッドに沿っての移動になる。なのでちょうどここって位置にできないのがデメリット。

さらに凡例を移動させるとグラフのサイズが変更され、元の凡例の位置によってはグリッドのちょうど良い位置じゃなくて元に戻せないこともある。注意。

x = [1, 2, 3]
y1 = [1, 3, 1]
y2 = [2, 3, 2]

editsでピンポイントで編集可能に


editableにしてしまうとありとあらゆる項目が編集可能になってしまう。特に凡例の位置を変更できるようにしてしまうと、移動してしまった時に面倒。

そんな時にはeditsを使うと良い。editsはピンポイントで編集したい箇所だけを編集できる。編集可能な内容は以下。

  • annotationPosition
  • annotationTail
  • annotationText
  • axisTitleText
  • colorbarPosition
  • colorbarTitleText
  • legendPosition
  • legendText
  • shapePosition
  • titleText

ここではaxisTitleText=Trueにして軸ラベルの編集だけを可能にした。これで無駄に編集してしまうことがなくなる。

import plotly.graph_objects as go
import plotly.io as pio

# configの設定
# 軸ラベルの内容のみを変更可能にする
# 'editable': Trueがあるとeditableが優先される
config = {'edits': {
    'axisTitleText': True,  # 軸ラベルの内容の変更を可能に
}}

x = [1, 2, 3]
y1 = [1, 3, 1]
y2 = [2, 3, 2]
fig = go.Figure(
    data=[
        go.Scatter(x=x, y=y1, name='data1'),
        go.Scatter(x=x, y=y2, name='data2'),
    ]
)
# グラフ全体とホバーのフォントサイズ変更
fig.update_layout(font_size=20, hoverlabel_font_size=20)
# fig.show()にconfigの設定を反映させる
fig.show(config=config)

# グラフ保存
prefix = 'plotly-config'  # 保存ファイル名の接頭辞
save_name = f"{prefix}_edits"
pio.orca.config.executable = '/Applications/orca.app/Contents/MacOS/orca'
pio.write_html(fig, f"{save_name}.html", config=config)
pio.write_image(fig, f"{save_name}.png")x = [1, 2, 3]
y1 = [1, 3, 1]
y2 = [2, 3, 2]

configの使い方でグラフを便利に

今回はplotlyconfig機能について解説した。まだまだconfigについてはいろんな機能があるけど、ここではよく使いそうなものに厳選して紹介した。

configを使ってツールバーの内容を変更できるようになると、グラフをより便利に賢く使うことができるだろう。

どうしてもグラフ本体に目が行きがちだが、こういうチップス的なテクニック的なところにも注目してplotlyを使っていただけると幸いだ。

【plotly&size, width】Scatterのサイズやlineの太さ一覧表を作成

続きを見る

【plotly&legendまとめ】凡例の引数一覧

続きを見る

【plotly&legendまとめ】凡例の引数一覧

続きを見る

【plotly&pattern】棒グラフとかのパターンまとめ

続きを見る

【plotly&pattern】棒グラフとかのパターンまとめ

続きを見る

自作したplotlyのマーカーのシンボル一覧
【plotly&マーカー】plotlyのマーカーのシンボル

続きを見る

【plotly&ボタン】plotlyのupdatemenusにbuttonsを追加

続きを見る

【plotly&スライダー】plotlyのslidersにスライダーを追加

続きを見る

【plotly&グラフテーマ】plotly既存のthemasをグラフ化

続きを見る

【plotly&shapes】レイアウトとしてグラフ内に図形を配置する

続きを見る

ガジェット

2023/9/18

【デスクツアー2022下半期】モノは少なく、でも効率的に Desk Updating #0

今回はガジェットブロガーなのにデスク環境を構築していない執筆者の ...

ライフハック

2023/9/16

【Audible vs YouTube Premium】耳で聴く音声学習コンテンツを比較

ワイヤレスイヤホンが普及し耳で学習することへのハードルが格段に下 ...

完全ワイヤレスイヤホン(TWS)

2023/9/18

【SENNHEISER MOMENTUM True Wireless 3レビュー】全てが整ったイヤホン

今回は高音質・高機能なSENNHEISERのフラグシップ完全ワイヤレスイヤホン「SENNH ...

ライフハック

2023/3/11

【YouTube Premiumとは】メリットしかないから全員入れ

今回はYouTube Premiumを実際に使ってみてどうなのか、どんなメリット/デメリット ...

マウス

2023/8/17

【Logicool MX ERGOレビュー】疲れない作業効率重視トラックボールマウス

こんな人におすすめ トラックボールマウスの王道Logicool MX ERGOが気になるけどऩ ...

ベストバイ

2023/9/18

【ベストバイ2022】今年買って良かったモノのトップ10

2022年ベストバイ この1年を振り返って執筆者は何を買ったのか。ガジェッ& ...

スマホ

2023/1/15

【楽天モバイル×povo2.0の併用】月1,000円の保険付きデュアルSIM運用

こんな人におすすめ 楽天モバイルとpovo2.0のデュアルSIM運用って実際のとこ ...

マウス

2023/9/16

【Logicool MX ERGO vs MX Master 3】ERGOをメインにした決定的な理由

こんな疑問・お悩みを持っている人におすすめ 執筆者はLogicoolのハイエンӠ ...

macOSアプリケーション

2022/9/30

【Chrome拡張機能】便利で効率的に作業できるおすすめの拡張機能を18個紹介する

こんな人におすすめ Chromeの拡張機能を入れたいけど、調べても同じような ...

macOSアプリケーション

2023/5/3

【Automator活用術】Macで生産性を上げる作業の自動化術

今回はMacに標準でインストールされているアプリ「Automator」を使ってできる ...

Pythonを学びたいけど独学できる時間なんてない人へのすゝめ

執筆者は大学の研究室・大学院にて独学でPythonを習得した。

でも社会人になったら独学で行うには時間も体力もなくて大変だ。

時間がない社会人だからこそプロの教えを乞うのが効率的。

ここでは色んなタイプに合ったプログラミングスクールの紹介をする。

  • この記事を書いた人

メガネ

Webエンジニア駆け出し。独学のPythonで天文学系の大学院を修了。常時金欠のガジェット好きでM2 Pro MacBook Pro(30万円) x Galaxy S22 Ultra(17万円)使いの狂人。自己紹介と半生→変わって楽しいの繰り返しレビュー依頼など→お問い合わせ運営者情報、TwitterX@m_ten_pa、 YouTube@megatenpa、 Threads@megatenpa

-Plotly全般
-, , , ,