Plotlyでマウスオーバーしたときのポップアップの中のテキストを折り返すの巻

Plotlyでマウスオーバーしたときのポップアップの中のテキストを折り返すの巻

はじめに

Plotlyで、このようにマウスオーバーで出てくるポップアップ(hover text)中の長い文字列を、、、

plotly_hovertext_wrap01

このように折り返したいのです。

plotly_hovertext_wrap02

と、いう話。

やり方

とりあえず手を加えてない形を表示してみます。”text”の部分に長い文字列を入れています。

import plotly.graph_objects as go

fig = go.Figure(data=go.Scatter(
    x=[2],
    y=[10],
    mode='markers',
    text="abcdefghijklmnopqrstuvwxyz0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ",
    marker=dict(size=[80],
                color=["orange"])
))

fig.show()

すると、こうなります。

plotly_hovertext_wrap01

普通の長いテキストを折り返したい場合は

HTMLの<br>タグを改行したい部分に入れればいいだけでした。

import plotly.graph_objects as go

fig = go.Figure(data=go.Scatter(
    x=[2],
    y=[10],
    mode='markers',
    text="abcdefghijklmnopqrstuvwxyz<br>0123456789<br>ABCDEFGHIJKLMNOPQRSTUVWXYZ",
    marker=dict(size=[80],
                color=["orange"])
))

fig.show()
plotly_hovertext_wrap02

でけた。

例えばリストの形で変数に入れ込んでいる場合は、、、

import plotly.graph_objects as go

fig = go.Figure(data=go.Scatter(
    x=[2],
    y=[10],
    mode='markers',
    text=[["abcdefghijklmnopqrstuvwxyz", "0123456789", "ABCDEFGHIJKLMNOPQRSTUVWXYZ"]],
    marker=dict(size=[80],
                color=["orange"])
))

fig.show()
plotly_hovertext_wrap03

“<br>”.join(list)とすればよしと。

import plotly.graph_objects as go

fig = go.Figure(data=go.Scatter(
    x=[2],
    y=[10],
    mode='markers',
    text=["<br>".join(["abcdefghijklmnopqrstuvwxyz", "0123456789", "ABCDEFGHIJKLMNOPQRSTUVWXYZ"])],
    marker=dict(size=[80],
                color=["orange"])
))

fig.show()
plotly_hovertext_wrap04

こちらもでけた。

HTMLタグの<br>で改行できる、と。少しあたふたしたのでメモ。

おしまい

実施環境

Python 3.9.4

Plotly ver.4.14.3

参考

https://plotly.com/python/hover-text-and-formatting/


このブログはエックスサーバー で運営しております。


Word Press専用クラウド型レンタルサーバーwpX Speed

WordPressを使うならロリポップ!
簡単インストール完備で楽々スタート!


世界にたった一つ、あなただけのドメインを登録しよう!

格安ドメイン取得サービス─ムームードメイン─

たまには自分をいたわったり、ねぎらったりしてあげてもいいよね。ご帰宅途中にお気軽に。
全国630店舗以上!もみほぐし・足つぼ・ハンドリフレ・クイックヘッドのリラクゼーション店【りらくる】