カテゴリー

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の散布図グラフの描き方

こんな人にオススメ plotlyのと{ ...

続きを見る

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

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

こんな人にオススメplotlyで画ࠔ ...

続きを見る

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のと{ ...

続きを見る

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

こんな人にオススメ plotlyでグ} ...

続きを見る

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のScatterӗ ...

続きを見る

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

こんな人にオススメ plotlyのlayoutの ...

続きを見る

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

こんな人にオススメ plotlyのlayoutの ...

続きを見る

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

こんな人にオススメ plotlyの棒| ...

続きを見る

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

こんな人にオススメ plotlyの棒| ...

続きを見る

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

こんな人にオススメplotlyにもmatplo ...

続きを見る

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

こんな人にオススメ plotlyって| ...

続きを見る

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

こんな人にオススメ plotlyでは| ...

続きを見る

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

こんな人にオススメ plotlyでグ} ...

続きを見る

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

こんな人にオススメ plotlyでグ} ...

続きを見る

スイッチボット

2022/9/11

【SwitchBotロックレビュー】これからのスタンダードになりうるスマートロック

こんな人にオススメ SwitchBotからスマートロック「SwitchBotロック」が発売された ...

生活に役立つ

2022/10/25

【メガネ厳選】クソ便利に使っているサービスやアイテム達

このページでは執筆者「メガネ」が実際に使って便利だと感じているサ ...

マウス

2022/9/11

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

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

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

2022/11/21

【ながら聴きイヤホン比較】SONY LinkBuds、ambie、BoCoはどれがおすすめ?

こんな人におすすめ 耳を塞がない開放型のイヤホンに完全ワイヤレスӟ ...

macOSアプリケーション

2022/10/15

【M1 Mac】MacBook Proに入れている便利でニッチなアプリを21個紹介する

こんな人におすすめ MacBookを購入してLINEとか必要最低限のアプリは入れた。 ...

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

2022/10/23

【SENNHEISER MOMENTUM True Wireless 3レビュー】高レベルでバランス型の高音質イヤホン

こんな人におすすめ SENNHEISER MOMENTUM True Wireless 3って実際のところどうなの? 評判は良い ...

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

2022/11/21

【SONY WF-1000XM4レビュー】神とゴミのハーフ&ハーフ

こんな人におすすめ SONYのフラグシップモデル「SONY WF-1000XM4」ってどれくらい性 ...

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

2022/8/19

【Nothing ear (1)レビュー】ライトな完成度、アップデートに期待

こんな人にオススメ 完全ワイヤレスイヤホン(TWS)でスケルトンボディ ...

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

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

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

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

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

  • この記事を書いた人

メガネ

ベンチャー企業のWebエンジニア駆け出し。独学のPythonで天文学系の大学院を修了→新卒を1.5年で辞める→転職→今に至る。
常時金欠のガジェット好きでM1 MacBook Pro x Galaxy S22 Ultraの狂人。
人見知りで根暗だったけど、人生楽しもうと思って良い方向に狂う→人生が楽しい

ガジェットのレビューとPythonコードを記事にしています。ぜひ楽しんでください🦊
自己紹介と半生→変わって楽しいの繰り返し

-Plotly全般
-, , ,