はじめに
Streamlitは、Pythonだけで簡単にWebアプリケーションが作れるとても便利なライブラリです。データを可視化する際に、グラフと一緒に解説テキストを表示することで、閲覧者にとってより分かりやすいアプリにすることができます。
この記事では、「グラフの隣にテキストで解説を表示する」構成を中心に、視覚情報と文章の組み合わせでデータの意味を伝える方法を紹介していきます。
Streamlitでグラフ＋テキストを表示する基本構造
Streamlitでは、st.columns()を使うことで、画面を複数の列に分割できます。今回は、「左にグラフ、右にテキスト」を並べる2カラム構成を作成してみましょう。
🔧 ステップ1：必要なライブラリをインポートする
import streamlit as st
import matplotlib.pyplot as pltStreamlitの他に、グラフ描画用の matplotlib を使います。まだインストールしていない場合は、以下のコマンドでインストールしてください。
pip install matplotlib🔧 ステップ2：2カラム構成を作成する
col1, col2 = st.columns([2, 1])st.columns()で2つのカラムを作成[2, 1]は 左カラムを右カラムの2倍の幅にしています（グラフの方が大きいため）
🔧 ステップ3：左にグラフ、右にテキストを表示
with col1:
fig, ax = plt.subplots()
ax.plot([1, 2, 3, 4], [10, 20, 15, 30])
st.pyplot(fig)
with col2:
st.markdown("### データのポイント")
st.write("このグラフは、時間の経過に伴う数値の変化を示しています。3点目で一度下がり、その後大きく上昇しています。")with col1:とすることで、左側のカラムにグラフを表示with col2:の中で、右側のカラムにテキストを表示
これだけで、グラフの横に解説テキストを並べて表示できるレイアウトが完成します。
実践例①：折れ線グラフ＋解説文
より実用的な例として、ある商品の月別売上データを可視化してみましょう。
📊 サンプルコード
import streamlit as st
import matplotlib.pyplot as plt
months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"]
sales = [120, 150, 170, 160, 180, 220]
col1, col2 = st.columns([2, 1])
with col1:
fig, ax = plt.subplots()
ax.plot(months, sales, marker="o", color="blue")
ax.set_title("月別売上推移")
ax.set_ylabel("売上（万円）")
st.pyplot(fig)
with col2:
st.markdown("### 売上の推移")
st.write("2月から4月にかけて緩やかな増加がありますが、5月から大きく売上が伸びています。特に6月は220万円と、半年間で最高の売上を記録しています。")
💡 ポイント
marker="o"を使って、データ点がわかる折れ線グラフにax.set_title()やax.set_ylabel()でグラフにタイトルや軸ラベルを追加- 右カラムに売上の変化ポイントを丁寧にテキストで説明
実践例②：棒グラフ＋注釈
カテゴリごとのデータ（例：部門別売上など）には、棒グラフが効果的です。
📊 サンプルコード
import streamlit as st
import matplotlib.pyplot as plt
departments = ["Dept. A", "Dept. B", "Dept. C", "Dept. D"]
sales = [300, 450, 200, 500]
col1, col2 = st.columns([2, 1])
with col1:
fig, ax = plt.subplots()
ax.bar(departments, sales, color="skyblue")
ax.set_title("Sales by Department")
ax.set_ylabel("Sales (in 10K)")
st.pyplot(fig)
with col2:
st.markdown("### 注目ポイント")
st.write("D部門の売上が500万円と、他の部門よりも圧倒的に高いことが分かります。C部門は最も低く、今後の改善が求められる部門です。")
💡 ポイント
ax.bar()で 棒グラフを描画- 比較対象が明確なので、解説文も強調点を示しやすい
見やすくする工夫
以下の工夫を加えると、より視認性の高いレイアウトになります。
✅ テキストに見出しや太字を使う
st.markdown("### 分析結果")
st.markdown("**売上の急増**は5月以降に見られます。")
✅ st.expander を使って補足情報を折りたたむ
with st.expander("詳細を見る"):
st.write("6月の売上増加には、新商品の効果が大きく影響しています。")✅ カラムの比率を調整してバランスよく
col1, col2 = st.columns([3, 2]) # 少しグラフを大きめにまとめ
グラフだけでは伝わりにくいデータの背景や意味も、テキストを添えることで一気に伝達力が高まります。
Streamlitの st.columns() 機能を活用すれば、視覚と文章をバランスよく組み合わせたアプリが簡単に作れます。
matplotlibでグラフを描画st.columns()でレイアウトを作成st.markdown()やst.expander()でテキストに工夫を加える
初心者の方でも、これらの基本を押さえることで「伝わるアプリ」を作ることができます。ぜひご自身のデータにも応用してみてください。
参考リンク
最後に書籍のPRです。
24年9月に出版された「ハイパーモダンPython-信頼性の高いワークフローを構築するモダンテクニック」、Claudio Jolowicz著、嶋田、鈴木訳。開発環境の構築、プロジェクトの管理、テストに関して実践的な内容でとても参考になる一冊です。Poetryについても詳しく説明されています。ぜひ手に取ってみてください。
最後まで読んでいただきありがとうございます。
コメント