タイトルを見て、Plotly ってグラフを描くためのライブラリだと思ってたけれども、表を描く方法ってどういうこと？と思いませんでしたか？
実は、plotlyでグラフを描くときと同じように、図も描くことができます！ pandasの出力だけでは、表の装飾や、図と一緒に表示するといったことはできませんが、そのようなことも Plotlyではできます！
表を描く方法に関しては、いくつか方法があるのですが、今回はその第1弾として、このブログで良く紹介している「graph_object」を用いた go.Table で表を描く方法についてです！
表の描き方 基本編
ここでは、下の表を作っていく過程を説明しながらまとめていきます！
無事、完成すると、列ごとに入れ替えることができるようになっているはずです！下の表の一番上の行を左右にドラッグして確かめてみてください！
今回使用するデータは、地域別・年別の LifeExp(平均寿命), pop(人口), gdpPercap(一人あたりのGDP)です。
上のグラフは、下の8行のコードで書くことができます！
基本構造としては、fig.add_trace で graph_object対応のグラフを加えていくという流れは他のグラフと同じです。表の場合は、go.Tableです。
go.Table 固有の特徴
go.Table 固有の特徴としては、引数が "header" と "cells" という2大要素で構成されている点です。
- header : 表のヘッダー (1行目)の設定 (values : 1次元配列・リスト)
- cells : 表のヘッダー以外 の設定 (values : 2次元配列)
それぞれ、辞書型で複数の要素を加えることができますが、最低限の要素としては、表内に表示する値(values)なので、ここではvaluesに絞って紹介します。
(他の設定要素についても知りたい方は、下の応用編も見てみてください！)
fig = go.Figure()
fig.add_trace(
go.Table(
header = dict(values=['titile1','title2']),
cells = dict(values=[[1,2],[3,4]])
)
)
fig.show()dataframe (pandas)から 表を生成するときの Tips
pandas のデータフレームでは、表の形として整っているので下のように書くことで、plotlyの表形式にそのまま変換することができます！
- header : df.columns で データフレームのカラム名を取得できる (それをリスト化してheaderのvaluesに)
- cells : データフレームのすべての行に関して、一列ずつ取得
header や cells の部分を少し変更するだけで、全てとってくるのではなく、条件にあったものだけを抽出するといったことも可能になりますね！
go.Table(
header = dict(values=list(df.columns)),
cells = dict(values=[df.iloc[:,num] for num in range(len(df.columns))])
)サンプルコード
上で紹介した表は、このコードで実装することができます。
import plotly.graph_objects as go
import pandas as pd
# データ準備
df = px.data.gapminder()
df= df.groupby(['continent','year']).mean().reset_index().drop('iso_num',axis=1)
df = df.round(4) #小数点以下第4位までにする
# 表を描く
fig = go.Figure()
fig.add_trace(
go.Table(
header = dict(values=list(df.columns)),
cells = dict(values=[df.iloc[:,num] for num in range(len(df.columns))])
)
)
fig.show()表の描き方 応用編 (装飾を加える)
ここまでは、表を書く上で最低限必要なことに絞って紹介していきました。しかし、表でできることは他にもたくさんあります！ということで、ここからは、表に装飾を加えてできることについてまとめていきます。この記事で紹介することは以下の通り。
- 枠線の色
- 表の背景色
- 中央揃え、右・左揃え
- フォント
- 高さ設定
- 背景色を交互に設定
これらを組み合わせると、下の図を書くことができますよ！
ちなみに、"header", "cells" は分かれているので、それぞれ別に設定できます！
先ほど、valuesしか設定しなかった header, cellsの辞書型の中に下記の設定を加えてください。
枠線の色 (line_color)
表内の 枠線の色を設定できます。デフォルトだと、白色で見えにくいところもあるので、見やすくするためには変更することがおすすめです！
ちなみに おすすめは、 "darks late gray" (見た目は黒色の線です！)
line_color='darkslategray'表の背景色 (fill_color)
表内の背景色を設定する部分です。
上の例では、headerの背景色に 'royalblue'を設定しています。
fill_color='royalblue'中央揃え、右・左揃え (align)
一列ずつ文字を揃える方向を設定できます (デフォルトは中央揃え)
例であげた表では、下のように記述していて、1列目は左揃え、2列目は中央揃えとして設定、3列目以降はデフォルトで中央揃えとなっています。
align=['left','center']フォント (font)
表内で使われている文字のフォントの設定ができます。
基本は、辞書型で 色(color) や、大きさ(size)を設定できますが、
フォントのサイズだけを変えたいときは、 font_size = 12 というようにサイズだけを変えることも可能です！
(ちなみに、色を指定しなかったときは、デフォルトの黒色になります)
font=dict(color='white', size=12)
#font_sizeだけの設定 (色はデフォルトの黒色に)
font_size=12高さ設定 (height)
表の一行の高さを設定できます
height=40背景色を交互に設定 (+α 実践編)
実際に表を作るときに背景色が全部同じだと見にくい... ということはありませんか？
そのようなときの解決法として、奇数行と偶数行の背景色を変えることが考えられますが、以下のように設定することで、それが実現できます！
仕組みとしては、偶数行の背景色と奇数行の背景色をそれぞれ設定した上で、それを繰り返すといった設定です！
rowEvenColor = 'lightgrey'
rowOddColor = 'white'
fill_color = [[rowOddColor,rowEvenColor]*40],サンプルコード
上で紹介した表は、このコードで実装することができます。
import plotly.graph_objects as go
import pandas as pd
df = px.data.gapminder()
df= df.groupby(['continent','year']).mean().reset_index().drop('iso_num',axis=1)
df = df.round(4) #小数点以下第4位までにする
# 表を描く
rowEvenColor = 'lightgrey'
rowOddColor = 'white'
fig = go.Figure()
fig.add_trace(
go.Table(
header = dict(
values=list(df.columns),
line_color='darkslategray',
fill_color='royalblue',
align=['left','center'],
font=dict(color='white', size=12),
height=40
),
cells = dict(
values=[df.iloc[:,num] for num in range(len(df.columns))],
line_color='darkslategray',
fill_color = [[rowOddColor,rowEvenColor]*40],
align=['left', 'center'],
font_size=12,
height=30
)
)
)
fig.show()
コメント