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
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. 1pxpadat#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{
