本記事では， plotlyを用いた表の作成方法についてまとめています。
plotlyはグラフの作成のイメージがあるかもしれませんが，表の作成をすることもできます。
本記事で簡単に作成できるように紹介したいと思います！
表の作成
作成した表の装飾
目標とするグラフは↓です。
*このグラフのコードは，最後のまとめにあります。一括でコピペしたい場合は，そちらを参考にしてください。
ライブラリの読み込み
まずはライブラリの読み込みを行いたいと思います。
ライブラリには，sklearn, pandas, plotly.graph_objectsを使います。
plotlyで表を作成するだけであればplotly.graph_objectsがあれば大丈夫です。
#ライブラリのインポート
from sklearn import datasets
import pandas as pd
import plotly.graph_objects as go表の作成(基本)
さて，plotlyを使った表の作成を行いたいと思います。公式の解説はこちらをご確認下さい。
使い方を確認するため，いきなりデータセットを使うのではなく数値を自分で記載して作成しようと思います。
ここで作成する表は下図↓になります。
コードは↓です。
簡単に表を作成するだけであれば，コードはシンプルです。
fig=go.Figure()
fig.add_trace(go.Table(header=dict(values=['Column_A', 'Column_B']),
cells=dict(values=[[20, 30, 50], [92, 53, 19]])
))
fig.show()表を作成する要素は2-4行で，まとめると下表のようになります。
fig.add_trace(go.Table(header = dict(values = <VALUE>),
cells = dict(values = <VALUE>)
))| header= dict(values = <VALUE>) | ヘッダーのデータ |
| cells = dict(values = <VALUE>) | 列の値データ |
header= dict(values = ○○○)では，表のヘッダーを指定することができ，cells = dict(values = ○○○)では，列ごとに情報をまとめ表を作成することができます。
cells = dict(values = ○○○)には文字列を記載することもできます。
上記のコードをcells=dict(values=[[20, 30, 50, 'A','C'], [92, 53, 19,'B','D']])とすると下図のようになります。
表の作成（DataFrame）
この章以降からは，あやめデータのデータセットを用いて表の作成方法を確認していこうと思います。
データの読み込み
それでは，あやめのデータを読み込んでいこうと思います。
コードは↓のようになります。
#あやめデータの読み込み
data = datasets.load_iris()
X=data['data']
Y=data['target']
wine_X = pd.DataFrame(X, columns=data['feature_names'])
df_iris = wine_X.copy()
df_iris['target']=Y
df_irisこのあやめデータを使って，plotlyで表を作成していきます。
表の作成
表を作成すると↓のようになります。
コードは以下になります。
fig=go.Figure()
fig.add_trace(go.Table(header=dict(values=df_iris.columns),
cells=dict(values=df_iris.values.T)
))
fig.show()
ここでのコードは前章のコードと同じになりますが，header= dict(values = ○○○)とcells = dict(values = ○○○)に入れるデータに注意が必要です。
header= dict(values = ○○○)には，ヘッダー情報を記載するのでdf_iris.columnsにてあやめのヘッダー助法を呼び出しています。
cells = dict(values = ○○○)では，列の情報をリストにする必要があるため，df_iris.values.Tとしています。
表の装飾
先ほど作成したグラフに，装飾を行い見栄えを変えていこうと思います。
以下の表は，文字のアライメント，色，セルの背景色などの設定を行っています。
コードは以下のようになります。
fig=go.Figure()
fig.add_trace(go.Table(header=dict(values=df_iris.columns,
align='left',
fill_color='gray',
font=dict(color='white',
family='Arial',
size=15),
height=28,
line=dict(color='black',
width=2)),
cells=dict(values=df_iris.values.T,
align='left',
fill_color='white',
font=dict(color='black',
family='Arial',
size=15),
height=24,
line=dict(color='black',
width=1))
))
fig.show()前述のコードに，3-10, 12-19行目に追記をしています。
それぞれの設定項目は以下を参照ください。
fig.add_trace(go.Table(header=dict(…,
align = <VALUE>,
fill_color = <VALUE>,
font=dict(color = <VALUE>,
family= <VALUE>,
size=<VALUE>),
height= <VALUE>,
line=dict(color= <VALUE>,
width= <VALUE>)),
cells=dict(…,
align = <VALUE>,
fill_color = <VALUE>,
font=dict(color = <VALUE>),
line=dict(color = <VALUE>,
width = <VALUE>))
))header=dict(…),cells=dict(…)は共通なので以下でまとめます
| align = <VALUE> | 表中の文字の位置設定 “left”, “center”, “right” | |
| filll_color = <VALUE> | セルの背景色の設定 | |
| font = dic(…) | color = <VALUE> | 文字の色の設定 |
| family = <VALUE> | 文字のフォント設定 | |
| size = <VALUE> | 文字のフォントサイズの設定 | |
| height = <VALUE> | セルの高さの設定 | |
| line = dict(…) | color = <VALUE> | セルの枠線色の設定 |
| width = <VALUE> | セルの枠線の太さの設定 | |
以下では，ここでご紹介した内容を基に見栄えをもう少し工夫したいと思います。
セルの背景色を交互に設定
まずは，以下のようにセルの背景色を交互に設定することで，表をより見やすくできます。
コードは以下です。
fig=go.Figure()
fig.add_trace(go.Table(header=dict(values=df_iris.columns,
align='left',
fill_color='gray',
font=dict(color='white',
family='Arial',
size=15),
height=24,
line=dict(color='black',
width=2)),
cells=dict(values=df_iris.values.T,
align='left',
fill_color=[['white','lightgray']*150],
font=dict(color='black',
family='Arial',
size=15),
line=dict(color='black'))
))
fig.show()交互の背景色の設定には，13行目のようにfill_color=[['white','lightgray']*150]としそれぞれ色を指定します。
今回，使用しているあやめのデータセットは150行あるので*150としています。
特定の列のハイライト
ここでは，特定の列だけをハイライトしてみます。
コードは以下です。
fig=go.Figure()
fig.add_trace(go.Table(header=dict(values=df_iris.columns,
align='left',
fill_color='gray',
font=dict(color='white',
family='Arial',
size=15),
height=24,
line=dict(color='black',
width=2)),
cells=dict(values=df_iris.values.T,
align='left',
fill_color='white',
font=dict(color=['black', "red", 'black'],
family='Arial',
size=15),
line=dict(color=['black', "red", 'black'],
width=[1,2,1]))
))
fig.show()今回2列目をハイライトしているのでfont=dict(color= <VALUE>), line=dict(color= <VALUE>)で['black', "red", 'black']として2列目を"red"としています。
3列目以降は，'black'が反映されます。
まとめ
この記事では，plotlyを使った表の作成方法をみてきました。
表の作成には以下を設定します。
fig.add_trace(go.Table(header=dict(values = <VALUE>,
align = <VALUE>,
fill_color = <VALUE>,
font=dict(color = <VALUE>,
family = <VALUE>,
size = <VALUE>),
height = <VALUE>,
line=dict(color = <VALUE>,
width = <VALUE>)),
cells=dict(values = <VALUE>,
align = <VALUE>,
fill_color = <VALUE>,
font=dict(color = <VALUE>),
line=dict(color = <VALUE>,
width = <VALUE>))
))| header= dict(values = <VALUE>) | ヘッダーのデータ | |
| cells = dict(values = <VALUE>) | 列の値データ | |
# 表の装飾はheader=dict(…),cells=dict(…)で共通なので以下でまとめます | ||
| align = <VALUE> | 表中の文字の位置設定 “left”, “center”, “right” | |
| filll_color = <VALUE> | セルの背景色の設定 | |
| font = dic(…) | color = <VALUE> | 文字の色の設定 |
| family = <VALUE> | 文字のフォント設定 | |
| size = <VALUE> | 文字のフォントサイズの設定 | |
| height = <VALUE> | セルの高さの設定 | |
| line = dict(…) | color = <VALUE> | セルの枠線色の設定 |
| width = <VALUE> | セルの枠線の太さの設定 | |
冒頭のコードはこちら
#ライブラリのインポート
from sklearn import datasets
import pandas as pd
import plotly.graph_objects as go
#あやめデータの読み込み
data = datasets.load_iris()
X=data['data']
Y=data['target']
wine_X = pd.DataFrame(X, columns=data['feature_names'])
df_iris = wine_X.copy()
df_iris['target']=Y
df_iris
#グラフの描画
fig=go.Figure()
fig.add_trace(go.Table(header=dict(values=df_iris.columns,
align='center',
fill_color='gray',
font=dict(color='white',
family='Arial',
size=15),
height=28,
line=dict(color='black',
width=2)),
cells=dict(values=df_iris.values.T,
align='center',
fill_color=[['white','lightgray']*150],
font=dict(color='black',
family='Arial',
size=15),
height=24,
line=dict(color='black',
width=1))
))
fig.show()以上，【plotly】コピペでOK！表の作成 でした！
読了お疲れ様でした！
コメント