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

2021年4月7日 2023年1月14日

プログラミングの新ブログ→Pro天パ

こんな人にオススメ

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

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

運営者メガネ

作成したコード全文

+ クリックでオープン

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

# config一覧↓
# <https://github.com/plotly/plotly.js/blob/master/src/plot_api/plot_config.js>

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

print('------------------------------------------------------------')
# ただグラフ化

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")

print('------------------------------------------------------------')
# スクロールでズーム可能にする

# 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")

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

# 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")

print('------------------------------------------------------------')
# 静止画にする

# 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}_staticPlot"
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")

print('------------------------------------------------------------')
# 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.update_layout(font_size=20, hoverlabel_font_size=20)

# 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")

print('------------------------------------------------------------')
# モードバーからボタンを消す

# 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.update_layout(font_size=20, hoverlabel_font_size=20)

# 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")

print(' - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -')
# 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")

print('------------------------------------------------------------')
# モードバーにボタンを追加

# 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")

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

x = [1, 2, 3]
y = [1, 3, 1]
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")

print('------------------------------------------------------------')
# ダブルクリックの間隔を変更

# 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")

print('------------------------------------------------------------')
# 各項目の内容と凡例の位置の変更を可能にする

# configの設定
config = {'editable': True}

x = [1, 2, 3]
y = [1, 3, 1]
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}_editable"
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")

print('------------------------------------------------------------')
# ピンポイントで変更できるようにする

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

x = [1, 2, 3]
y = [1, 3, 1]
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")

下準備（`import`）

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

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

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

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

続きを見る

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

: 【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を追加したり削除したりすることにする。なお、plotlyのgoを使った散布図の描き方と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`でスクロールすると拡大・縮小可能なグラフ

次にスクロール可能なグラフを作成。configはdictの中でさらに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")

`displaylogo`で`plotly`のロゴを消す

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`の使い方でグラフを便利に

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

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

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

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

続きを見る

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

続きを見る

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

続きを見る

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

続きを見る

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

続きを見る

: 【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を習得した。

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

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

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

王道中の王道で学びたい

小さなところやマイナーなところだと不安って人は王道中の王道「TechAcademy [テックアカデミー]」おすすめだ。

TechAcademy [テックアカデミー]の特徴は色々とあるけど、特にすごいのは以下の5点だ。

選抜された現役エンジニアから学べる
オンラインに特化
Web制作・プログラミング・アプリ開発を学べる
ひたすら寄り添ってくれる
900社、30,000名を超える教育実績
実際の副業の仕事を紹介

また、学生割引もあるので、これから社会人に向けて勉強したい人にもピッタリだ。

無料相談もできるのでぜひチェックしていただきたい。

子どものうちから学んでもらいたい

これからの時代はプログラミングの知識がない人はかなり厳しいと思う。

かといって大人になってから、今から自分で頑張ってねってのはかなり酷な話だ。ということで子どものうちからプログラミングを学ばせるのも1つの手だ。

ITeens Lab ならオンラインでプログラミングの学習ができる。しかも基礎的なところだけではなく、本格的なプログラミング言語や動画制作、デザインや資格取得についても学べるから大盤振る舞いだ。

オンラインだから送り迎えもいらないし、元気いっぱいな子どもに合わせた学習内容になるから親御さんも安心して任せられる。

子どもの頃からしっかりとプログラミングに慣れておく、大人になってからかなりの戦力として活躍するだろう。

独学でできるくらいの気力や環境があれば問題ない。しかし、いくら意志の力でどうにかしようとしてもなかなか難しい部分はあるだろう。

そんな人は効率的に学習するためにプログラミングスクールという選択肢もありだ。

ゼロからPythonを学びたい

執筆者のようにゼロからPythonを学びたいって人も多いだろう。

Pythonは他の言語に比べて書きやすく読みやすいので、プログラミング初心者でも扱いやすい。

さらにPythonには以下の特徴がある。

Webスクレイピングが得意
ディープラーニング（機械学習）に特化
Webアプリの作成もできる

テックジム（techgym）の「ゼロからはじめるPython入門講座」では入りやすく応用も効くPythonを学ぶことができる。

Pythonの基本的な文法からビジネス・就職・転職への応用、はたまた効率的なプログラミングの学習ま方法までも本講座で得ることができる。

初めてのプログラミングで腰が上がらないって人はまずは入門講座から始めるのが良いだろう。

メガネ

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