htmlcssjavascriptcanvasgrafikMahir12 mnt baca

Grafik Sederhana dengan Canvas

Menggambar diagram batang dan garis dengan Canvas API bawaan browser.

Kenapa Canvas?

Dashboard butuh grafik: penjualan per bulan, trafik pengunjung. Canvas adalah "kertas gambar" browser tempat kamu menggambar dengan kode. Memahaminya memberi fondasi untuk game 2D dan visualisasi data.

Langkah Membangun

HTML: <canvas id="grafik" width="600" height="300"> dan tombol ganti jenis (batang/garis).

CSS: Canvas dibuat responsif dengan max-width: 100%; height: auto. Bungkus dalam kartu putih.

JS: Konsep canvas:

  1. const ctx = canvas.getContext("2d") adalah "kuas"-nya.
  2. Sistem koordinat: (0,0) di kiri ATAS, y bertambah ke bawah.
  3. Gambar batang: ctx.fillRect(x, y, lebar, tinggi) untuk tiap data. Tinggi batang = (nilai / maks) * tinggiArea.
  4. Gambar garis: ctx.beginPath(), moveTo titik pertama, lineTo titik-titik berikut, stroke().
  5. Label sumbu: ctx.fillText(teks, x, y).

Skala data ke piksel adalah inti visualisasi: tentukan nilai maksimum, lalu petakan tiap nilai ke tinggi piksel secara proporsional.

Kesalahan Umum

  • Canvas buram di layar retina (kalikan width/height dengan devicePixelRatio lalu scale context).
  • Lupa membersihkan canvas sebelum menggambar ulang (ctx.clearRect) sehingga grafik menumpuk.
  • Teks label terpotong di tepi (beri padding/margin dalam canvas).
Live Playground
export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}
Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Tantangan: Grafik Donat

Tambahkan jenis ketiga: diagram donat (pie dengan lubang tengah) memakai ctx.arc dengan sudut proporsional tiap data.

Kuis Bab

Uji pemahamanmu: Data: Tabel, Filter & Pencarian

Jawab 5 soal berikut, lalu tekan "Periksa Jawaban".

1.Pola profesional apa yang dipakai saat mengurutkan data tabel?

2.Kenapa angka 100 bisa muncul sebelum 20 saat di-sortir sebagai teks?

3.Fungsi array apa yang paling tepat untuk menghitung total harga keranjang?

4.Apa fungsi elemen 'penjaga' (sentinel) di pola infinite scroll?

5.Kenapa skeleton screen lebih baik daripada spinner untuk loading konten?