Streamlit 學習筆記 : 內建統計圖表 (一) 折線圖

Streamlit 內建了下列五個基於 Altair 實作的統計圖表函式 : 

函式名稱	說明
st.line_chart()	繪製折線圖，適合用來呈現時間序列或連續變化的資料。
st.bar_chart()	繪製長條圖，適合用來比較各分類資料的數值大小。
st.scatter_chart()	繪製散佈圖，用於顯示兩個變數之間的關係（需 DataFrame 格式資料）。
st.area_chart()	繪製區域圖，類似折線圖，但底部會填滿陰影，強調總量變化。
st.map()	在地圖上繪製地理座標點，支援 DataFrame 中包含緯度與經度的資料。

Streamlit 使用 Altair 作為這五個函式底層繪圖引擎是因為它能夠快速產生視覺化效果, 且支援基本的互動功能 (例如滑鼠懸停顯示數據點資訊). 這五個函式生成的圖表風格 (如配色, 字體, 互動行為等) 使用 Altair 的預設樣式. 

Altair 是一個基於 Vega 和 Vega-Lite 的 Python 聲明式視覺化函式庫, Streamlit 利用其生成 JSON 規格的圖表, 然後通過前端的 Vega-Lite 渲染為互動式圖表. Streamlit 的這五個內建圖表函式實際上是對 Altair 的高級封裝, 將複雜的繪圖程序簡化為函式呼叫 (但缺點是無法做客製化設定). 

本系列所有測試文章參考 :

# Streamlit 學習筆記索引

1. 折線圖函式 st.line_chart() : 

此函式的參數結構如下 : 

st.line_chart(data=None, x=None, y=None, width=0, height=0, use_container_width=True)

參數說明如下表 :

st.line_chart() 參數	說明
data	要繪製的資料，可為 pandas DataFrame、numpy array 或 dict。
x	指定 x 軸的欄位名稱或索引，僅適用於 DataFrame。
y	指定 y 軸的欄位名稱 (可為單一欄位或其串列)，僅適用於 DataFrame。
width	圖表寬度（像素），預設為 0，表示由系統自動決定。
height	圖表高度（像素），預設為 0。
use_container_width	是否讓圖表自動填滿容器寬度 (預設 True，有設 width 時須設 False)。

注意, 雖然 data 參數不是必要, 但通常需提供, 未傳入 data 參數不會報錯, 而是會繪製一張空白的圖表 (這樣很奇怪). 

例如 : 

測試 1-1 : 隨機資料的折線圖 [看原始碼]   

# st-line-chart-test-1.py

import streamlit as st

import pandas as pd

import numpy as np

# 隨機資料

data=pd.DataFrame(

    np.random.randn(20, 3),

    columns=['甲', '乙', '丙']

    )

# 繪製折線圖

st.line_chart(data)

此例使用 Numpy 產生一組 20x3 的常態分佈隨機數, 然後將其轉成 Pandas 的 DataFrame 物件, 傳給 st.line_chart() 繪製折線圖 : 

參數 use_container_width 預設為 True, 所以圖片會與父容器同寬. 當滑鼠移到折線圖上的資料點時會互動地顯示該資料的數值. 

下面是指定 x 與 y 參數的範例 : 

測試 1-2 : 傳入 x 與 y 參數的氣溫變化折線圖 [看原始碼]   

# st-line-chart-test-2.py

import streamlit as st

import pandas as pd

df=pd.DataFrame({

    '日期': pd.date_range('2025-06-01', periods=7),

    '溫度': [28, 26, 25, 27, 30, 32, 31]

    })

st.subheader('一周氣溫變化')

st.line_chart(df, x='日期', y='溫度')

此例傳入 x 與 y 參數指定 X 與 Y 軸標籤, 結果如下 :

可見繪圖時預設 Y 軸是從 0 起算, 所以看起來溫度變化很平穩, 內建函式因為使用方便性而高度包裝, 無法客製化指定顯示區間.

可以傳入 width 與 height 參數來調整圖片尺寸 : 

測試 1-3 : 傳入 width 與 height 參數來設定圖片尺寸 [看原始碼]   

# st-line-chart-test-3.py

import streamlit as st

import pandas as pd

df=pd.DataFrame({

    '日期': pd.date_range('2025-06-01', periods=7),

    '溫度': [28, 26, 25, 27, 30, 32, 31]

    })

st.subheader('一周氣溫變化')

st.line_chart(df, x='日期', y='溫度', width=150, height=400, use_container_width=False)

此例傳入 width 與 height 參數來設定圖片尺寸, 注意, 有設定 width 參數時必須同時將 use_container_width 參數設為 False 才會讓 width 設定生效 (Streamlit 不會看到有 width 就自動將 use_container_width 設為 False) : 

可見圖片比上例變窄變高, 按右上角的三個點按鈕會彈出選單, 可將圖片存成 SVG 或 PNG 檔. 

下面是結合日期選擇器的互動範例 :

測試 1-4 : 繪製日期選擇器所選日期範圍的氣溫變化圖 [看原始碼]   

# st-line-chart-test-4.py

import streamlit as st

import pandas as pd

import numpy as np

# 建立 100 筆日氣溫資料

dates=pd.date_range('2025-01-01', periods=100)

data=pd.DataFrame({

    '日期': dates,

    '溫度': np.random.normal(loc=25, scale=2, size=100)

    })

# 建議使用說明提示

st.write('請選擇一個日期範圍（點兩次）')

# 設定日期範圍預設值: 最小與最大日期

date_selection=st.date_input(

    '選擇日期範圍',

    value=(dates.min(), dates.max()),   # 設定可選範圍

    min_value=dates.min(),

    max_value=dates.max()

    )

# 處理日期選取單日 unpack 問題, 不論回傳 1 或 2 都能正確 unpack

if isinstance(date_selection, tuple) and len(date_selection) == 2:

    start_date=pd.Timestamp(date_selection[0])

    end_date=pd.Timestamp(date_selection[1])

else:

    st.warning('請選擇起訖日期, 否則無法顯示圖表')

    st.stop()  # 因不是選取一個日期範圍, 中斷後面程式執行

# 篩選資料

mask=(data['日期'] >= start_date) & (data['日期'] <= end_date)

filtered_data=data.loc[mask]

# 顯示圖表

st.line_chart(

    data=filtered_data,

    x='日期',

    y='溫度',

    )

此例建立一個 DataFrame, 包含自 2025-01-01 起的 100 天模擬氣溫資料, 然後呼叫 st.date_input() 建立一個日期選擇器元件, 檢查使用者是否選擇一個日期範圍, 是的話取出起迄日期從氣溫資料中篩選出該日期範圍內的資料丟給 st.line_chart() 顯示, 初始化結果如下 :

選擇日期範圍為 1/8~1/16 : 

顯示 1/8~1/16 氣溫 :