PB曲線をStreamlitで作成したいので、２軸グラフにチャレンジ。
Streamlitで2軸の複合グラフを作成するためには、altair_chartを使用する。
altair_chartは、Altairライブラリを使用して、グラフを表示するAPI。
そのため、altair_chartを使用する場合は、Altairライブラリのマニュアルを見て作成が必要になる。
作ってみる
作ってみるのは、試験の残項目数とバグ件数を2軸の複合グラフで表示する。 下記のサイトを参考にした。
大きなポイントとしては、2つ。 - それぞれのグラフのオブジェクトを作成する - 2つのグラフを階層化して1つのグラフにする
それぞれのグラフのオブジェクトを作成する
mark_line関数とencode関数をコールしてそれぞれのグラフのオブジェクトを作成する。
remaning_test_items = base.mark_line(color="red").encode( alt.Y("残項目数", axis=alt.Axis(title="残項目数")) ) bugs = base.mark_line().encode(alt.Y("バグ数", axis=alt.Axis(title="バグ数")))
2つのグラフを階層化して1つのグラフにする
複数のグラフを1つにする場合、layerとresolve_scaleを使用する。
まずは、2つのグラフを階層化（1つにする）するために、alt.layerを実行する。
その際に、パラメータは1つにしたいグラフのオブジェクトを指定する。
次に、複合グラフを作成するための、resolve_scale を実行する。
Y軸は別々にしたいので、y="independentをパラメータとして指定する。
pb_chart = alt.layer(remaning_test_items, bugs).resolve_scale(y="independent")
日付通りに表示されない
X軸は、dateを指定しているが、これだと日付と認識してくれない。
日付である場合は、対象のカラム名の後に、:Tをつける必要がある。
base = alt.Chart(chart_data).encode(x="date")
base = alt.Chart(chart_data).encode(x="date:T")
表示できた
表示できた。X軸の表記などの細かいところはあるが、期待する表示はできた。
最後に
Altairを使ってグラフを表示できた。
2軸表示するために、layerとresolve_scaleが必要であることに気づくのが遅かった。
サンプルを少しずつ変更して表示確認すればよかったと少し後悔とちゃんとソースの読んでいる関数を調べないといけないなと
改めて感じた。
参考
import streamlit as st import pandas as pd import altair as alt st.title("PB曲線グラフ") chart_data = pd.read_csv("./data.csv") base = alt.Chart(chart_data).encode(x="date:T") remaning_test_items = base.mark_line(color="red").encode( alt.Y("残項目数", axis=alt.Axis(title="残項目数")) ) bugs = base.mark_line().encode(alt.Y("バグ数", axis=alt.Axis(title="バグ数"))) pb_chart = alt.layer(remaning_test_items, bugs).resolve_scale(y="independent") st.altair_chart(pb_chart, use_container_width=True)
- データ
date,残項目数,バグ数,, 2024-03-01,200,0,, 2024-03-02,190,0,, 2024-03-03,184,1,, 2024-03-04,182,1,, 2024-03-05,173,1,, 2024-03-06,168,2,, 2024-03-07,148,2,, 2024-03-08,132,2,, 2024-03-09,120,2,, 2024-03-10,117,3,, 2024-03-11,102,3,, 2024-03-12,91,3,, 2024-03-13,83,3,, 2024-03-14,76,3,, 2024-03-15,53,3,, 2024-03-16,43,3,, 2024-03-17,37,3,, 2024-03-18,23,3,, 2024-03-19,21,3,, 2024-03-20,19,3,, 2024-03-21,7,3,, 2024-03-22,3,3,, 2024-03-23,1,3,, 2024-03-24,0,3,,
