Halo sobat Dumetschool, pada kesempatan kali ini saya akan membahas tentang Bar Chart yang merupakan grafik berbentuk balok yang menampilkan data dengan grafik vertikal atau horizontal. Biasanya dibuat untuk memberikan perbandingan agar mudah dipahami dalam membaca suatu data. Membuat tampilan grafik bisa berupa lingkaran, garis, batang atau bentuk lainnya, dalam hal ini saya akan menunjukkan cara membuat grafik batang dengan HTML, CSS dan JQUERY. Baiklah teman-teman langsung saja ikuti langkah membuatnya sebagai berikut
Langkah pertama adalah membuat struktur HTML terlebih dahulu dengan script di bawah 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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
Bagaimana Membuat Bilah Bagan Dengan HTML CSS dan JQUERY
Survei Keanggotaan Programmer
Pemula
Pemula
Lanjutan
Profesional
HTML&CSS
88%
PHP
75%
MySQL
68%
JavaScript
50%
Codeigniter
65%
Laravel
35%
Sudut
35%
Script diatas membuat tampilan berupa diagram batang yang berisi nilai persentase (%)
Langkah selanjutnya sobat siapkan library JQuery
1
src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
dan Script dari javascript seperti di bawah ini
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$(dokumen). siap(fungsi() {
barChart();
$(jendela).mengubah ukuran(fungsi() {
barChart();
});
fungsi barChart(){
$('. bar'). temukan('. kemajuan'). masing-masing(fungsi() {
var itemProgress = $(ini),
itemProgressWidth = $(this). orang tua(). lebar() * ( $(ini). data('nilai') / 100);
kemajuan item. css('lebar', itemProgressWidth);
});
}
});
pada script diatas terdapat fungsi barChart() yang digunakan untuk menentukan lebar sesuai dengan nilai atau nilai presentasi yang telah ditentukan, dan lihat script yang ada pada baris pertama barChart(), document. siap dan jendela. mengubah ukuran
Langkah selanjutnya adalah menambahkan gaya CSS seperti di bawah 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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
. bilah - bilah {
posisi. kerabat;
lebar. 100%;
margin - atas. 15 piksel;
padding - bawah. 1 piksel;
}
. bilah - bilah > . yang - pembungkus {
posisi. mutlak;
bawah. 0;
kiri. 15%;
lebar. 80%;
tinggi. 40 piksel;
margin - bawah. - 45px;
batas - atas. 1px padat #000;
}
. bilah - bilah > . yang - bungkus > . label {
posisi. kerabat;
tampilan. sebaris - blokir;
mengambang. kiri;
lebar. 25%;
teks - sejajarkan. tengah;
}
. bilah - bilah > . yang - bungkus > . label. sebelum {
tampilan. blokir;
posisi. mutlak;
atas. 0;
kiri. 0;
konten. '';
lebar. 1px;
tinggi. 8px;
latar belakang - warna. #000;
margin - atas. - 8px;
}
. bilah - bilah > . yang - bungkus > . label. terakhir. setelah {
tampilan. blokir;
posisi. mutlak;
atas. 0;
benar. 0;
kiri. otomatis;
konten. '';
lebar. 1px;
tinggi. 8px;
latar belakang - warna. #000;
margin - atas. - 8px;
}
. bilah - bilah > . yang - bungkus > . label h4 {
font - ukuran. 13 piksel;
teks - transformasi. huruf besar;
huruf - spasi. 1 piksel;
font - gaya. miring;
}
. bilah - bilah > . bagan {
posisi. kerabat;
lebar. 100%;
}
. bilah - bilah > . bagan > . barang {
posisi. kerabat;
lebar. 100%;
tinggi. 40 piksel;
margin - bawah. 10 piksel;
font - berat. 700;
warna. #000;
teks - transformasi. huruf besar;
}
. bilah - bilah > . bagan > . barang > . bar {
posisi. mutlak;
atas. 0;
kiri. 15%;
lebar. 80%;
tinggi. 100%;
latar belakang - warna. rgb(103, 255 , 255);
z - indeks. 5;
}
. bilah - bilah > . bagan > . barang > . bilah > . nilai {
tampilan. blokir;
posisi. mutlak;
atas. 0;
benar. 0;
tinggi. 40 piksel;
garis - tinggi. 40px;
pengisian - kanan. 12 piksel;
z - indeks. 15;
}
. bilah - bilah > . bagan > . barang > . bilah > . kemajuan {
posisi. mutlak;
atas. 0;
kiri. 0;
tinggi. 100%;
latar belakang - warna. rgb(255, 141 , 0);
z - indeks. 10;
}
. bilah - bilah > . bagan > . barang > . judul {
tampilan. blokir;
posisi. mutlak;
tinggi. 40 piksel;
garis - tinggi. 40px;
pengisian. 0px 50px 0px;
huruf - spasi. 2px;
z - indeks. 15;
}
Jika semua script sudah diketik, jalankan saja di browser masing-masing, maka tampilan akan seperti di bawah ini
Demikian pembahasan artikel kali ini tentang cara membuat diagram batang dengan HTML CSS dan JQUERY, semoga bermanfaat dan selamat mencoba