2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【Streamlit】集合棒グラフを作って日付ごとの売上見込・売上実績を比較する

Last updated at Posted at 2024-05-29

前置き

こんにちはデータエンジニアの山口歩夢です!

この度、Streamlitの入門書を執筆しました!
Streamlitについて、基本的な内容から実践的な内容、自分が開発する上で躓いたポイントやTipsなどを書かせていただきました。

電子版が技術書典にて購入可能なため、是非チェックいただけると幸いです。

今回は、Streamlitで集合棒グラフを作成したので、作成方法をご紹介させていただきます。

集合棒グラフとは

集合棒グラフ(grouped bar chart)とは、複数のカテゴリのデータを比較するためのグラフです。各カテゴリが棒で表され、高さがそのカテゴリの数値を表します。
棒グラフは一つのカテゴリの値を期間ごとに比較したりするのに役立つのに対して、集合棒グラフは複数のカテゴリを期間ごとに比較するのに役立ちます。

以下のようなグラフです。
売上実績と売上見込が隣合わせになり、日付ごとに集計されていることが分かります。
image.png

実装方法

Vega-AltairというPythonのデータ可視化ライブラリと、st.altair_chartというStreamlitに用意されている関数を使用して、集合棒グラフの作成を行います。

st.altair_chartは、Vega-Altairライブラリを使用してデータを可視化してくれる関数です。
Streamlitにはst.bar_chartst.line_chartなどの非常に簡単なコードでデータを可視化できる関数が用意されていますが、これらはst.altair_chartを使う場合よりも簡単にコードを書けるようにした関数(syntax-sugarと呼ばれる関数)です。
今回の集合棒グラフのようなカスタマイズ性が高いグラフを可視化したい場合は、st.altair_chartの方を使用する必要があります。

上記のライブラリや関数を使用して作成したコードは以下です。

streamlit_app.py
import streamlit as st
import pandas as pd
import altair as alt
import numpy as np

st.set_page_config(
    page_title="Streamlit App",
    page_icon="🧊",
    layout="wide",
    initial_sidebar_state="expanded"
)

# 日付範囲を生成
date_range = pd.date_range(start='2024-05-01', periods=15, freq='D')

# 売上見込と売上実績のデータをランダムに生成
sales_forecast = np.random.randint(100, 300, size=15)
sales_actual = np.random.randint(80, 250, size=15)

# データフレームを作成
data = pd.DataFrame({
    '日付': date_range,
    '売上見込': sales_forecast,
    '売上実績': sales_actual
})

# 日付列を文字列に変換
data['日付'] = data['日付'].dt.strftime('%Y-%m-%d')

# グラフ化するためにデータ型を更新
data_long = pd.melt(data, id_vars=['日付'], value_vars=['売上見込', '売上実績'])

# Altairチャートを作成
chart = alt.Chart(data_long).mark_bar(
    opacity=1
    ).encode(
    column=alt.Column('日付:O', spacing=5, header=alt.Header(labelOrient="bottom", title=None)),
    x=alt.X('variable', sort=['売上見込', '売上実績'], axis=None),
    y=alt.Y('value:Q', title=None),
    color=alt.Color('variable', title=None)
).configure_view().properties(width=60, height=400)

# Streamlitにチャートを表示
st.altair_chart(chart)

上記のコードを書いて、「streamlit run」を実行すると

$ streamlit run streamlit_app.py

以下のように、集合棒グラフを作成することができました!

image.png

まとめ

Streamlitには、st.bar_chartst.line_chartなどの簡単にグラフを可視化できる関数を用意されていますが、
st.altair_chartを使用することで更に複雑なグラフを可視化できるということが非常に勉強になりました!

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?