Dalam tutorial sebelumnya, kita membahas cara menggambar diagram lingkaran atau diagram donat menggunakan kanvas HTML5. Dalam tutorial ini, saya akan menunjukkan cara menggunakan JavaScript dan kanvas HTML5 untuk menampilkan data secara grafis dengan menggunakan bagan batang

Table of Contents Show

Apa Itu Bagan Batang?
Apa Komponen Diagram Batang?
Menggambar Bagan Batang Menggunakan JavaScript
Menyiapkan Proyek JS
Menambahkan Beberapa Fungsi Pembantu
Model Data Bagan Batang
Menerapkan Kelas BarChart
Menerapkan Komponen Bagan Batang
Menggunakan Komponen Bagan Batang
Menambahkan Nama Seri Data dan Legenda Bagan
Bagaimana Anda membuat grafik batang dalam HTML?
Bagaimana Anda memplot grafik dalam HTML?
Bagaimana cara membuat grafik batang menggunakan HTML dan CSS?
Contoh Bagan Batang HTML. Hanya Menggunakan HTML Dan CSS
Bisakah Anda membuat grafik dalam HTML?

Apa Itu Bagan Batang?

Bagan batang adalah alat yang sangat umum digunakan untuk mewakili data numerik. Dari laporan keuangan hingga presentasi PowerPoint hingga infografis, diagram batang sangat sering digunakan karena menawarkan tampilan data numerik yang sangat mudah dipahami.

Bagan batang mewakili data numerik menggunakan batang, yang merupakan persegi panjang dengan lebar atau tingginya sebanding dengan data numerik yang diwakilinya

Ada banyak jenis diagram batang, misalnya

bagan batang horizontal dan bagan batang vertikal tergantung pada orientasi bagan
bagan batang bertumpuk atau bagan batang klasik untuk mewakili beberapa rangkaian data
Bagan batang 2D atau 3D

Apa Komponen Diagram Batang?

Mari kita lihat komponen yang membentuk diagram batang, apa pun jenisnya

Data grafik. ini adalah kumpulan angka dan kategori terkait yang diwakili oleh bagan
Nama seri data (1)
Kisi bagan (2). memberikan sistem referensi sehingga representasi visual dapat dengan mudah dipahami
Bilah (3). persegi panjang penuh warna dengan dimensi sebanding dengan data yang diwakili
Legenda grafik (4). menunjukkan korespondensi antara warna yang digunakan dan data yang diwakilinya

Sekarang setelah kita mengetahui komponen diagram batang, mari kita lihat bagaimana kita dapat menulis kode JavaScript untuk menggambar diagram seperti ini

Menggambar Bagan Batang Menggunakan JavaScript

Menyiapkan Proyek JS

Untuk mulai menggambar menggunakan JavaScript dan kanvas HTML5, kita perlu menyiapkan proyek kita seperti ini

Buat folder untuk menyimpan file proyek;
Di dalam folder proyek, buat file dan beri nama index. html. Ini akan berisi kode HTML kita
Juga di dalam folder proyek, buat file dan beri nama skrip. js. Ini akan berisi kode JavaScript untuk menggambar diagram batang

Kami akan membuat semuanya sangat sederhana dan menambahkan kode berikut di index. html

<html>

<body>

    <canvas id="myCanvas"></canvas>

    <script type="text/javascript" src="script.js"></script>

</body>

<html>

<html>

Kami memiliki elemen

_94 dengan ID

95 sehingga kami dapat mereferensikannya dalam kode JS kami. Kami kemudian memuat kode JS melalui

96 tag

Tambahkan kode berikut di skrip. file js

<html>

<html>

<html>

<html>

Ini mendapatkan referensi ke elemen kanvas dan kemudian menyetel lebar dan tinggi ke

97. Untuk menggambar di atas kanvas, kita hanya membutuhkan referensi ke konteks 2D-nya, yang berisi semua metode menggambar

Menambahkan Beberapa Fungsi Pembantu

Menggambar bagan batang hanya perlu mengetahui cara menggambar dua elemen

menggambar garis. untuk menggambar garis grid
menggambar persegi panjang penuh warna. untuk menggambar batang grafik

Mari buat fungsi helper JS untuk kedua elemen ini. Kami akan menambahkan fungsi dalam skrip kami. file js

<body>

<html>

<body>

<body>

4________4______5

<body>

<body>

____9

Fungsi

98 mengambil enam parameter

```
4
```
_99. mengacu pada konteks gambar

    <script type="text/javascript" src="script.js"></script>

_00. koordinat X titik awal garis

    <script type="text/javascript" src="script.js"></script>

_01. koordinat Y titik awal garis

    <script type="text/javascript" src="script.js"></script>

_02. koordinat X titik akhir garis

    <script type="text/javascript" src="script.js"></script>

_03. koordinat Y dari titik akhir garis

    <script type="text/javascript" src="script.js"></script>

_04. warna garis

Kami memodifikasi pengaturan warna untuk

    <script type="text/javascript" src="script.js"></script>

05. Ini menentukan warna yang digunakan untuk menggambar garis. Kami menggunakan

    <script type="text/javascript" src="script.js"></script>

_06 dan

    <script type="text/javascript" src="script.js"></script>

07 sehingga kami tidak memengaruhi warna yang digunakan di luar fungsi ini

Kami menarik garis dengan menelepon

    <script type="text/javascript" src="script.js"></script>

_08. Ini menginformasikan konteks gambar bahwa kita mulai menggambar sesuatu yang baru di atas kanvas. Kami menggunakan

    <script type="text/javascript" src="script.js"></script>

_09 untuk mengatur titik awal, memanggil

    <script type="text/javascript" src="script.js"></script>

10 untuk menunjukkan titik akhir, dan kemudian melakukan gambar yang sebenarnya dengan memanggil

    <script type="text/javascript" src="script.js"></script>

Fungsi pembantu lainnya yang kita perlukan adalah fungsi untuk menggambar batang—yang merupakan persegi panjang berisi warna. Mari tambahkan ke skrip. js

<html>

    <canvas id="myCanvas"></canvas>

Fungsi

    <script type="text/javascript" src="script.js"></script>

12 mengambil enam parameter

```
4
```
_99. mengacu pada konteks gambar

    <script type="text/javascript" src="script.js"></script>

_14. koordinat X dari sudut kiri atas bilah

    <script type="text/javascript" src="script.js"></script>

_15. koordinat X dari sudut kiri atas bilah

    <script type="text/javascript" src="script.js"></script>

_16. lebar batang

    <script type="text/javascript" src="script.js"></script>

_17. ketinggian bar

    <script type="text/javascript" src="script.js"></script>

_04. warna batang

Model Data Bagan Batang

Sekarang setelah kita memiliki fungsi pembantu, mari beralih ke model data bagan. Semua jenis bagan, termasuk bagan batang, memiliki model data di belakangnya. Model data adalah sekumpulan data numerik terstruktur. Untuk tutorial ini, kami akan menggunakan rangkaian data kategori dan nilai numerik terkait yang mewakili jumlah rekaman vinil dalam koleksi rekaman saya yang dikelompokkan berdasarkan genre musik

Musik klasik. 16
Rock alternatif. 12
Pop. 18
Jazz. 32

Kami dapat merepresentasikan ini dalam JavaScript dalam bentuk objek. Kami akan meneruskan data ini ke objek

    <script type="text/javascript" src="script.js"></script>

_19 kami bersama dengan informasi lainnya. Mari kita tambahkan ke skrip kita. file js

    <canvas id="myCanvas"></canvas>

    <canvas id="myCanvas"></canvas>

    <canvas id="myCanvas"></canvas>

    <canvas id="myCanvas"></canvas>

<html>

<body>

Menerapkan Kelas BarChart

Kelas

    <script type="text/javascript" src="script.js"></script>

_19 kita akan memiliki berbagai metode untuk membantu membagi kode menjadi bagian-bagian terkait yang terpisah. Komponen yang berbeda dari diagram batang akan digambar dengan metode yang berbeda

Menerapkan Komponen Bagan Batang

Mari terapkan kelas dan metode yang akan menggambar grafik batang kita. Kami akan melakukan ini dengan menambahkan kode JavaScript berikut ke skrip kami. file js

    <script type="text/javascript" src="script.js"></script>

    <script type="text/javascript" src="script.js"></script>

<html>

    <script type="text/javascript" src="script.js"></script>

<body>

    <script type="text/javascript" src="script.js"></script>

<body>

    <script type="text/javascript" src="script.js"></script>

<body>

</body>

</body>

</body>

</body>

</body>

</body>

</body>

</body>

</body>

</body>

<html>

<html>

<html>

<html>

<html>

<html>

<html>

<html>

<html>

<html>

<html>

<html>

<html>

<html>

<html>

<html>

<html>

<html>

<html>

<html>

<html>

20_____

Kelas mulai mendefinisikan metode konstruktor untuk melakukan beberapa inisialisasi dasar dengan menyimpan

    <script type="text/javascript" src="script.js"></script>

21 yang diteruskan sebagai parameter dalam properti yang berbeda. Ini menyimpan referensi

    <script type="text/javascript" src="script.js"></script>

_22 dan membuat konteks gambar yang juga disimpan sebagai anggota kelas. Kemudian ia menyimpan array

    <script type="text/javascript" src="script.js"></script>

_23 yang diteruskan sebagai opsi. Itu juga mengekstrak nilai maksimum kunci dari objek data kami dan menyimpannya di properti

    <script type="text/javascript" src="script.js"></script>

24. Kami membutuhkan nomor ini karena kami perlu menskalakan semua batang sesuai dengan nilai ini dan sesuai dengan ukuran kanvas. Jika tidak, bilah kami mungkin berada di luar area tampilan, dan kami tidak menginginkannya

Sekarang, kami akan menerapkan metode

    <script type="text/javascript" src="script.js"></script>

_25. Ini akan menggambar garis grid dan penanda grid

Variabel

    <script type="text/javascript" src="script.js"></script>

26 dan

    <script type="text/javascript" src="script.js"></script>

27 menyimpan tinggi dan lebar kanvas yang disesuaikan menggunakan nilai bantalan yang diteruskan melalui

    <script type="text/javascript" src="script.js"></script>

21. Variabel

    <script type="text/javascript" src="script.js"></script>

29 menunjukkan jumlah piksel antara tepi kanvas dan bagan di dalamnya

Kami kemudian menggambar garis grid grafik. Properti

    <script type="text/javascript" src="script.js"></script>

30 menetapkan langkah yang digunakan untuk menggambar garis. Jadi

    <script type="text/javascript" src="script.js"></script>

_30 dari 10 berarti menggambar garis grid setiap 10 unit

Untuk menggambar garis kisi, kami menggunakan fungsi pembantu

    <script type="text/javascript" src="script.js"></script>

32; . Harap perhatikan bahwa koordinat kanvas mulai dari

    <script type="text/javascript" src="script.js"></script>

34 di sudut kiri atas dan meningkat ke arah kanan dan bawah, sementara nilai kisi kami meningkat nilainya dari bawah ke atas. Itu sebabnya kami menggunakan

    <script type="text/javascript" src="script.js"></script>

_35 dalam rumus menghitung nilai

    <script type="text/javascript" src="script.js"></script>

Untuk setiap garis kisi, kami juga menggambar nilai garis kisi 2 piksel di atas garis kisi (itulah sebabnya kami memiliki

    <script type="text/javascript" src="script.js"></script>

37 untuk koordinat Y teks)

Selanjutnya, kita menggambar batang dengan menggunakan metode ________8______38. Matematika untuk menghitung tinggi dan lebar setiap batang cukup mudah;

Menggunakan Komponen Bagan Batang

Sekarang mari kita lihat bagaimana menggunakan kelas ________8______19 yang diimplementasikan di atas. Kita perlu membuat instance kelas dan memanggil metode

    <script type="text/javascript" src="script.js"></script>

40. Tambahkan kode berikut ke skrip. file js

<html>

<body>

    <canvas id="myCanvas"></canvas>

<body>

    <canvas id="myCanvas"></canvas>

<body>

    <canvas id="myCanvas"></canvas>

</body>

</body>

Kode membuat instance baru dari kelas

    <script type="text/javascript" src="script.js"></script>

19 dengan opsi yang diperlukan. Kami akan menulis metode yang menggunakan objek

    <script type="text/javascript" src="script.js"></script>

42 di bagian selanjutnya dari tutorial. Memuat indeks. html di browser akan menghasilkan hasil seperti ini

Menambahkan Nama Seri Data dan Legenda Bagan

Untuk menambahkan nama seri data di bawah bagan, kita perlu menambahkan metode berikut ke kelas

    <script type="text/javascript" src="script.js"></script>

19 kita

<html>

<body>

<body>

<body>

<html>

</body>

</body>

</body>

<html>

</body>

</body>

</body>

<html>

<html>

<body>

Kami menerima sekumpulan properti font di dalam objek

    <script type="text/javascript" src="script.js"></script>

42 kami untuk mengatur hal-hal seperti ukuran font, jenis font, dan bobot font. Kami juga menerima nilai string untuk menentukan perataan judul bagan. Kami menggunakan nilai ini untuk mengontrol perataan judul dan untuk menentukan posisi string baru selain perataannya

Perbarui juga metode kelas

    <script type="text/javascript" src="script.js"></script>

40 untuk menambahkan panggilan ke

    <script type="text/javascript" src="script.js"></script>

<body>

Kita juga perlu mengubah cara membuat instance kelas

    <script type="text/javascript" src="script.js"></script>

47 seperti ini

<body>

<body>

<html>

<body>

<body>

<body>

<body>

<body>

<body>

<body>

<body>

<body>

<body>

<body>

</body>

<body>

</body>

<body>

</body>

<body>

</body>

<body>

</body>

<body>

</body>

<body>

<html>

<body>

<html>

<body>

<html>

<body>

<html>

<body>

<html>

<html>

<html>

<body>

<html>

<html>

Dan inilah tampilan hasilnya

Untuk menambahkan legenda, pertama-tama kita perlu memodifikasi

    <script type="text/javascript" src="script.js"></script>

48 agar terlihat seperti ini

<html>

<body>

<body>

<body>

    <script type="text/javascript" src="script.js"></script>

<html>

</body>

<body>

<html>

Tag

    <script type="text/javascript" src="script.js"></script>

49 akan digunakan sebagai placeholder untuk legenda bagan. Atribut

    <script type="text/javascript" src="script.js"></script>

50 menautkan legenda ke kanvas yang memegang bagan. Kita sekarang perlu menambahkan kode yang membuat legenda. Kami akan melakukan ini di file

    <script type="text/javascript" src="script.js"></script>

51 setelah kode yang menggambar nama seri data. Kode mengidentifikasi tag

    <script type="text/javascript" src="script.js"></script>

_49 yang sesuai dengan bagan, dan akan menambahkan daftar kategori dari model data bagan bersama dengan warna yang sesuai. Indeks yang dihasilkan. file js akan terlihat seperti ini

<html>

<html>

<html>

<html>

<body>

<body>

<body>

<body>

<body>

<body>

<body>

<body>

<body>

<body>

</body>

<body>

</body>

<body>

</body>

</body>

<body>

</body>

<body>

</body>

<body>

<html>

<body>

<html>

<body>

<html>

<html>

<html>

<html>

<body>

<html>

<html>

<html>

<body>

<html>

<body>

<html>

<html>

Yang akan menghasilkan hasil akhir seperti ini

Coba berikan opsi yang berbeda ke bagan untuk melihat pengaruhnya terhadap hasil akhir. Sebagai latihan, dapatkah Anda menulis kode untuk membuat garis kisi-kisi itu berwarna-warni?

Selamat

Kita telah melihat bahwa menggambar bagan menggunakan kanvas HTML5 sebenarnya tidak terlalu sulit. Itu hanya membutuhkan sedikit matematika dan sedikit pengetahuan JavaScript. Anda sekarang memiliki semua yang Anda butuhkan untuk menggambar diagram batang Anda sendiri

Posting ini telah diperbarui dengan kontribusi dari Nitish Kumar. Nitish adalah pengembang web dengan pengalaman membuat situs web eCommerce di berbagai platform. Dia menghabiskan waktu luangnya mengerjakan proyek pribadi yang membuat kehidupan sehari-harinya lebih mudah atau berjalan-jalan sore bersama teman-temannya

Bagaimana Anda membuat grafik batang dalam HTML?

Ada 4 langkah dasar yang harus Anda ambil untuk membuat bagan batang sederhana untuk aplikasi atau situs web Anda. Buat halaman HTML. Referensi semua file yang diperlukan. .

Buat halaman HTML. .

Referensi semua file yang diperlukan. .

Kumpulkan datanya. .

Tulis kode untuk grafik

Bagaimana Anda memplot grafik dalam HTML?

Itu saja. .

Sintaks Bagan Sebar Tipikal. var myChart = new Chart("myChart", { type. "menyebar", data. {}, pilihan. {} });

Sintaks Bagan Garis Khas. var myChart = new Chart("myChart", { type. "baris", data. {}, pilihan. {}.

Sintaks Bagan Batang Khas. var myChart = new Chart("myChart", { type. "bilah", data. {}, pilihan. {}

Bagaimana cara membuat grafik batang menggunakan HTML dan CSS?

#1 Diagram Batang HTML - Hanya Menggunakan HTML dan CSS .

Bagan Batang HTML

Contoh Bagan Batang HTML. Hanya Menggunakan HTML Dan CSS

Bisakah Anda membuat grafik dalam HTML?

Anda dapat membuat HTML dasar untuk grafik dengan beberapa cara . Dalam tutorial ini, kita akan mulai dengan tabel , karena secara visual akan lebih masuk akal jika JavaScript atau CSS tidak diterapkan. Itu tanda centang besar di kolom untuk aksesibilitas. Cepat.