Hallo sobat Dumetschool jumpa lagi di tutorial kursus webdesign, pada kesempatan kali ini saya akan membahas cara membuat Pie Chart menggunakan HTML dan Chart. js. Jika kita ingin memvisualisasikan statistik, grafik yang akan digunakan dalam presentasi ini adalah cara yang tepat untuk merepresentasikannya. Memahami data menjadi mudah dan jelas dengan penggunaan grafik. Ada berbagai contoh perpustakaan grafik seperti Google Charts, Highchart, Chart. js, dan lainnya. Dalam hal ini saya akan membuat contoh untuk menampilkan grafik menggunakan library Chart. js. Dalam membuat tampilan grafik sederhana menggunakan library chart. js sangat sederhana. Teman-teman bisa langsung download bagan perpustakaan. js di sini, jika Anda telah menyimpan file di folder berikut
Langkah selanjutnya adalah menyiapkan struktur HTML, pada struktur HTML saya memiliki tag canvas untuk wadah tampilan chart yang akan dibuat, coba ketikkan script dibawah ini
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
Pembuatan Pie Bagan Menggunakan HTML dan Chart. js
var ctx = dokumen.getElementById("inicanvas"). getContext("2d");
// tampilan grafik
var piechart = baru Chart(ctx,{type. 'pai',
data . {
// label nama dari setiap Nilai
label. [
'Web Master',
'Desain Web',
'Pemrograman Web',
'Aplikasi Seluler',
'Digital Marketing'
],
kumpulan data. [{
// Total Nilai yang ditampilkan
data. [60,60, 60,80,100 ],
warna latar belakang. [
'rgba(24, 220, 110, 0. 5)',
'rgba(111, 80, 10, 0. 5)',
'rgba(11, 120, 170, 0. 5)',
'rgba(55, 20, 50, 0. 5)',
'rgba(99, 230, 90, 0. 5)'
]
}],
}
});
Jika sudah selesai mengetik script dengan benar maka akan terlihat seperti ini
Demikian artikel ini membahas tentang cara membuat pie chart menggunakan HTML dan Chart. js, sampai jumpa lagi di artikel berikutnya, semoga bermanfaat dan selamat mencoba