カテゴリー

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
スポンサーリンク
スポンサーリンク

運営者のメガネと申します。TwitterInstagramも運営中。

自己紹介はこちらから、お問い合わせはこちらからお願いいたします。

運営者メガネ

作成したコード全文

下準備(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】レイアウトとしてグラフ内に図形を配置する

続きを見る

関連コンテンツ

スポンサーリンク

Amazonのお買い物で損したない人へ

1回のチャージ金額通常会員プライム会員
¥90,000〜2.0%2.5%
¥40,000〜1.5%2.0%
¥20,000〜1.0%1.5%
¥5,000〜0.5%1.0%

Amazonギフト券にチャージすることでお得にお買い物できる。通常のAmazon会員なら最大2.0%、プライム会員なら2.5%還元なのでバカにならない。

ゲットしたポイントは通常のAmazonでのお買い物に使えるからお得だ。一度チャージしてしまえば、好きなタイミングでお買いものできる。

なお、有効期限は10年だから安心だ。いつでも気軽にAmazonでお買い物できる。

Amazonチャージはここから出来るで

もっとお得なAmazon Prime会員はこちらから

30日間無料登録

執筆者も便利に使わせてもらってる

スポンサーリンク

  • この記事を書いた人

メガネ

独学でpythonを学び天文学系の大学院を修了。 ガジェット好きでMac×Android使い。色んなスマホやイヤホンを購入したいけどお金がなさすぎて困窮中。 元々、人見知りで根暗だったけど、人生楽しもうと思って良い方向に狂ったために今も人生めちゃくちゃ楽しい。 pythonとガジェットをメインにブログを書いていますので、興味を持たれましたらちょこちょこ訪問してくだされば幸いです🥰。 自己紹介→変わって楽しいの繰り返し

-Plotly全般
-, , ,