【plotly】軸の値を文字列や日付に変更する方法[Python]

2022年11月25日2023年1月15日

URLをコピーしました！

plotly

前回、HTML上でインタラクティブなグラフ描写ができるライブラリplotlyで軸の目盛りの設定（フォント、角度）の設定方法を解説しました

軸の値を文字列にする：文字列の順番が関係ない場合

まずは軸の値を文字列にしてみましょう。

ただし最初にやるのは文字列に順番が関係ない場合です。

この場合はその軸のデータをそのまま文字列で渡します。

例えばX軸を「a、b、c、d、e」としたい場合はこんな感じです。

import random
import plotly.graph_objects as go

data_points = 5

x_val = ['a','b','c','d', 'e']
y_val = [random.randrange(100) for _ in range(data_points)]

graph = go.Scatter(x=x_val,y=y_val)

fig = go.Figure(data=graph)

with open('./plotly7-2.txt', 'w') as f:
     f.write(fig.to_html(include_plotlyjs='cdn',full_html=False))

実行結果

Y軸を文字列にしたい場合もデータを文字列で渡すので、こんな感じになります。

import random
import plotly.graph_objects as go

data_points = 5

x_val = [i for i in range(data_points)]
y_val = ['a','b','c','d', 'e']

graph = go.Scatter(x=x_val,y=y_val)

fig = go.Figure(data=graph)

with open('./plotly7-3.txt', 'w') as f:
     f.write(fig.to_html(include_plotlyjs='cdn',full_html=False))

実行結果

さてここまでは綺麗にグラフに出来ました。

ですが、こんなデータはどうでしょうか？

import random
import plotly.graph_objects as go

data_points = 5

x_val = ['b','a','c','a', 'b']
y_val = [random.randrange(100) for _ in range(data_points)]

graph = go.Scatter(x=x_val,y=y_val)

fig = go.Figure(data=graph)

with open('./plotly7-4.txt', 'w') as f:
     f.write(fig.to_html(include_plotlyjs='cdn',full_html=False))

実行結果

本来ならばアルファベットなのでX軸は「a、b、c」の順に並んでほしいのですが、「b、a、c」の順になってしまいました。

理由は「x_val = [‘b’,’a’,’c’,’a’, ‘b’]」とX軸の値の並びでみると「b」が最初に出てきて、その次に「a」、最後に「c」なのでX軸はその順になったということです。

では軸を文字列にしつつ、順番も制御したい場合はどうするのでしょうか？

軸の値を文字列にする：文字列の順番が重要な場合

軸の値を文字列にし、なおかつその文字列の順番を制御したい場合は以下の手順を踏みます。

文字列にしたい側の軸の値を並べたい順番の数値にする
文字列にしたい側の軸で「fig.update_xaxes()」、もしくは「fig.update_yaxes()」を準備する
オプションとして「tickvals」（並べる順番）、「ticktext」（ならべる文字列）を指定する

試してみるとこんな感じです。

import random
import plotly.graph_objects as go

data_points = 5

x_val = [1, 0, 2, 0, 1]
y_val = [random.randrange(100) for _ in range(data_points)]

graph = go.Scatter(x=x_val,y=y_val)

fig = go.Figure(data=graph)

fig.update_xaxes(tickvals=[0, 1, 2], ticktext=['a', 'b', 'c'])

with open('./plotly7-5.txt', 'w') as f:
     f.write(fig.to_html(include_plotlyjs='cdn',full_html=False))
        
print(y_val)

実行結果
[57, 51, 43, 12, 67]

この場合、X軸の数値「0」が「a」、「1」が「b」、「2」が「c」に対応します。

そのため「a、b、c」の順でX軸が並ぶようになったというわけです。

軸の値を日時にする

次に軸の値を日時にしてみましょう。

今回はX軸で試してみます。

軸の値を日時にしたい場合、その軸のデータを日時として認識されるフォーマットで渡す必要があります。

例えばこんな感じです。

import random
import plotly.graph_objects as go

data_points = 5

x_val = ['2022-05-01','2022-05-02','2022-05-03','2022-05-04 12:15:10', '2022-05-05 22:56:47']
y_val = [random.randrange(100) for _ in range(data_points)]

graph = go.Scatter(x=x_val,y=y_val)

fig = go.Figure(data=graph)

with open('./plotly7-6.txt', 'w') as f:
     f.write(fig.to_html(include_plotlyjs='cdn',full_html=False))

年月日だけなら「yyyy-mm-dd」（yは年、mは月、dは日）という書き方ができますし、時間まで指定する場合は「yyyy-mm-dd HH:MM:SS」（Hは時、Mは分、Sは秒）という書き方をすると、自動的に日時として認識されます。

もう一つの方法としては「datetimeモジュール」を使って、日時のデータを渡す方法があります。

import random
import plotly.graph_objects as go
import datetime

data_points = 5

x1 = datetime.datetime(2022,5,1)
x2 = datetime.datetime(2022,5,2)
x3 = datetime.datetime(2022,5,3)
x4 = datetime.datetime(2022,5,4,12,15,10)
x5 = datetime.datetime(2022,5,5,22,56,47)

x_val = [x1, x2, x3, x4, x5]
y_val = [random.randrange(100) for _ in range(data_points)]

graph = go.Scatter(x=x_val,y=y_val)

fig = go.Figure(data=graph)

with open('./plotly7-7.txt', 'w') as f:
     f.write(fig.to_html(include_plotlyjs='cdn',full_html=False))

また「yyyy/mm/dd」というフォーマットでは日時として認識されず、文字列として認識されていますので注意です。

import random
import plotly.graph_objects as go

data_points = 5

x_val = ['2022/05/01','2022/05/02','2022/05/03','2022/05/04 12:15:10', '2022/05/05 22:56:47']
y_val = [random.randrange(100) for _ in range(data_points)]

graph = go.Scatter(x=x_val,y=y_val)

fig = go.Figure(data=graph)

with open('./plotly7-8.txt', 'w') as f:
     f.write(fig.to_html(include_plotlyjs='cdn',full_html=False))

また単純に並べただけの「yyyymmdd」というフォーマットも日時として認識されず、単純に

import random
import plotly.graph_objects as go

data_points = 5

x_val = ['20220501','20220502','20220503','20220504121510', '20220505225647']
y_val = [random.randrange(100) for _ in range(data_points)]

graph = go.Scatter(x=x_val,y=y_val)

fig = go.Figure(data=graph)

with open('./plotly7-9.txt', 'w') as f:
     f.write(fig.to_html(include_plotlyjs='cdn',full_html=False))

今回は軸の値を文字列や日時にする方法を解説しました。

次回は軸の表示する範囲を設定してみましょう。