Menampilkan DataFrame dan grafik

Pilih antara grafik bawaan Streamlit yang cepat dan figure Plotly lengkap, siapkan data dalam bentuk yang tepat, dan biarkan widget menggerakkan grafiknya.

Idenya

Aplikasi Streamlit sering berbentuk "beberapa widget, lalu grafik yang bereaksi terhadapnya". Streamlit memberimu dua cara untuk menggambar:

Grafik bawaan (st.line_chart, st.bar_chart, st.area_chart, st.scatter_chart): satu baris, tanpa konfigurasi, bagus untuk melihat sekilas.
st.plotly_chart(fig): figure Plotly apa pun, dengan semua yang kamu pelajari di track Plotly: label, warna, hover, anotasi.

Pakai grafik bawaan saat bereksplorasi; pakai Plotly untuk apa pun yang akan dilihat stakeholder.

Grafik bawaan

Grafik ini menerima DataFrame dan menggambar kolom angka terhadap index (atau terhadap x= kalau kamu menyebutkannya):

import streamlit as st
import pandas as pd

sales = pd.read_csv("sales.csv")
completed = sales[sales["status"] == "completed"]
monthly = (completed.assign(month=completed["order_date"].str[:7])
           .groupby("month")["revenue"].sum())

st.subheader("Completed revenue per month")
st.line_chart(monthly)

monthly adalah Series dengan index bulan, jadi bulan menjadi sumbu x. Dengan DataFrame biasa, sebutkan kolomnya:

import streamlit as st
import pandas as pd

sales = pd.read_csv("sales.csv")
completed = sales[sales["status"] == "completed"]
by_category = completed.groupby("category", as_index=False)["revenue"].sum()

st.bar_chart(by_category, x="category", y="revenue")

Beberapa kolom angka menjadi beberapa seri. Tabel lebar (satu kolom per channel) menggambar satu garis per channel:

import streamlit as st
import pandas as pd

sales = pd.read_csv("sales.csv")
completed = sales[sales["status"] == "completed"]
wide = (completed.assign(month=completed["order_date"].str[:7])
        .pivot_table(index="month", columns="channel", values="revenue", aggfunc="sum", fill_value=0))
st.line_chart(wide)
st.dataframe(wide)

Perhatikan bentuknya: grafik bawaan Streamlit menyukai data lebar (satu kolom per seri), sementara Plotly Express menyukai data panjang (kolom channel ditambah color="channel"). pivot_table dan melt mengonversi di antara keduanya.

Grafik Plotly

Untuk kendali atas judul, label, hover dan warna, bangun figure Plotly lalu serahkan:

import streamlit as st
import pandas as pd
import plotly.express as px

sales = pd.read_csv("sales.csv")
completed = sales[sales["status"] == "completed"]
by_category = (completed.groupby("category", as_index=False)["revenue"].sum()
               .sort_values("revenue"))

fig = px.bar(by_category, x="revenue", y="category", orientation="h", text_auto=".2s",
             title="Electronics leads completed revenue",
             labels={"revenue": "Revenue (Rp)", "category": ""})
st.plotly_chart(fig, use_container_width=True)

use_container_width=True meregangkan grafik selebar kolom atau halaman, yang memang kamu inginkan di layout dengan kolom. Hover, zoom dan unduh semuanya berfungsi seperti di notebook.

Fungsi grafikmu dari track Plotly (ranking_bar, trend_line) langsung bisa dipakai: st.plotly_chart(ranking_bar(...)). Itulah hasil dari mengembalikan figure alih-alih menampilkannya.

Model rerun membuat grafik interaktif menjadi sepele: baca sebuah widget, filter, gambar.

import streamlit as st
import pandas as pd
import plotly.express as px

sales = pd.read_csv("sales.csv")
completed = sales[sales["status"] == "completed"].assign(month=lambda d: d["order_date"].str[:7])

metric = st.radio("Measure", ["revenue", "quantity"], horizontal=True)
channel = st.selectbox("Channel", ["all", "web", "app"])
rows = completed if channel == "all" else completed[completed["channel"] == channel]
monthly = rows.groupby("month", as_index=False)[metric].sum()

fig = px.line(monthly, x="month", y=metric, markers=True,
              title=f"Monthly {metric} ({channel})")
st.plotly_chart(fig, use_container_width=True)

Setiap perubahan menjalankan ulang script, membangun ulang monthly dan figure-nya dari input yang baru. Tidak ada fungsi update di mana pun.

Tabel yang enak dibaca

st.dataframe menerima beberapa opsi yang membuat tabel lebih mudah dibaca:

import streamlit as st
import pandas as pd

sales = pd.read_csv("sales.csv")
completed = sales[sales["status"] == "completed"]
top = (completed.groupby("product", as_index=False)
       .agg(units=("quantity", "sum"), revenue=("revenue", "sum"))
       .sort_values("revenue", ascending=False)
       .head(5))

st.dataframe(top, hide_index=True, use_container_width=True)

Siapkan tabelnya di pandas (agregasi, urutkan, ganti nama kolom menjadi nama yang ramah) dan biarkan st.dataframe menampilkannya. Memformat di pandas (.round(), mengganti nama kolom) menjaga kode tampilan tetap minimal.

Mengapa ini penting untuk kode yang bersih

Pemisahan yang sama seperti di track Plotly berlaku: persiapan data → figure → tampilan. Taruh setiap langkah di beberapa barisnya sendiri (atau fungsi), sehingga bagian Streamlit-nya hanya st.plotly_chart(fig). Saat grafiknya terlihat salah, kamu bisa memeriksa DataFrame dan figure-nya secara terpisah, tanpa harus mengklik-klik aplikasinya.

Rangkuman

st.line_chart, st.bar_chart, st.area_chart, st.scatter_chart menggambar kolom angka; pakai x=/y= atau index.
Grafik bawaan menyukai data lebar; Plotly Express menyukai data panjang; konversi dengan pivot_table / melt.
st.plotly_chart(fig, use_container_width=True) menampilkan figure Plotly apa pun.
Widget → filter → figure → st.plotly_chart; model rerun menjaganya tetap selaras.
Siapkan tabel di pandas; tampilkan dengan st.dataframe(..., hide_index=True).