Cara Membuat Diagram Pada HTML Dengan CSS Grid
Halo, selamat datang di Identips! Artikel ini merupakan bagian dari artikel Cara membuat diagram pada html. Bagian ini berisi cara membuat diagram pada HTML menggunakan CSS Grid.
Cara membuat diagram menggunakan CSS Grid
Untuk membuat diagram menggunakan CSS Grid, kamu dapat mengikuti langkah-langkah berikut:
Membuat kerangka
Bentuk kerangka yang akan kita buat adalah seperti gambar berikut:
Langkah pertama adalah membuat container grid untuk diagram. Container ini kita akan beri class=“diagram”.
<style>
<!-- CSS -->
</style>
<div class="container diagram">
<!-- HTML -->
</div>Selanjutnya kita tambahakan style CSS Grid sehigga container grid bisa lebih mirip dengan gambar kerangka diatas.
<style>
.diagram {
display: grid;
/* "grid-template-columns" digunakan untuk mengatur jumlah dan ukuran kolom */
grid-template-columns: 50px 70px 70px 70px 70px 70px 70px 70px;
/* "grid-template-rows" digunakan untuk mengatur jumlah dan ukuran baris */
grid-template-rows: 40px 40px 40px 40px 40px 40px 40px 40px 40px 30px;
width: 540px;
height: 390px;
margin: 30px;
}
</style>
<div class="container diagram">
<!-- HTML -->
</div>Selanjutnya adalah menambahkan grid item. Grid item kita buat sesuai jumlah kotak seperti yang ada pada gambar kerangka diatas dimana terdiri dari 10 kotak fekuensi, 7 kotak data dan 7 kotak balok. Setiap grid item kita beri class sesuai fungsinya. Grid item ini akan kita bungkus menggunakan container diagram.
<style>
<!-- CSS -->
</style>
<div class="diagram">
<!-- Frekuensi -->
<div class="frekuensi"></div>
<div class="frekuensi"></div>
<div class="frekuensi"></div>
<div class="frekuensi"></div>
<div class="frekuensi"></div>
<div class="frekuensi"></div>
<div class="frekuensi"></div>
<div class="frekuensi"></div>
<div class="frekuensi"></div>
<div class="frekuensi"></div>
<!-- Balok -->
<div class="balok a"></div>
<div class="balok b"></div>
<div class="balok c"></div>
<div class="balok d"></div>
<div class="balok e"></div>
<div class="balok f"></div>
<div class="balok g"></div>
<!-- Data -->
<div class="data a"></div>
<div class="data b"></div>
<div class="data c"></div>
<div class="data d"></div>
<div class="data e"></div>
<div class="data f"></div>
<div class="data g"></div>
</div>Kemudian menambahkan CSS untuk mengatur grid item yang telah kita buat
<style>
.diagram {
display: grid;
/* grid-template-columns digunakan untuk mengatur jumlah dan ukuran kolom */
grid-template-columns: 50px 70px 70px 70px 70px 70px 70px 70px;
/* grid-template-rows digunakan untuk mengatur jumlah dan ukuran baris */
grid-template-rows: 40px 40px 40px 40px 40px 40px 40px 40px 40px 30px;
width: 540px;
height: 390px;
margin: 30px;
}
.frekuensi,
.balok,
.data {
border: solid 1px #2c1544;
margin: 0;
padding: 0;
}
.frekuensi {
background-color: #fddd4e;
grid-column: 1;
}
.balok {
grid-row: 2 / span 8;
}
.data {
background-color: #fddd4e;
grid-row: 10;
}
.balok.a,
.data.a {
grid-column: 2;
}
.balok.b,
.data.b {
grid-column: 3;
}
.balok.c,
.data.c {
grid-column: 4;
}
.balok.d,
.data.d {
grid-column: 5;
}
.balok.e,
.data.e {
grid-column: 6;
}
.balok.f,
.data.f {
grid-column: 7;
}
.balok.g,
.data.g {
grid-column: 8;
}
</style>
<div class="container diagram">
<!-- HTML -->
</div>Maka hasilnya akan seperti ini
Memasukkan Data
Selanjutnya adalah memasukkan data dari tabel data pada kerangka yang telah kita buat diatas. Sekarang kita mulai mengedit data pada grid item di HTML.
<style>
<!-- CSS -->
</style>
<div class="diagram">
<!-- Frekuensi -->
<div class="frekuensi"><span>800</span></div>
<div class="frekuensi"><span>700</span></div>
<div class="frekuensi"><span>600</span></div>
<div class="frekuensi"><span>500</span></div>
<div class="frekuensi"><span>400</span></div>
<div class="frekuensi"><span>300</span></div>
<div class="frekuensi"><span>200</span></div>
<div class="frekuensi"><span>100</span></div>
<div class="frekuensi"><span>0</span></div>
<div class="frekuensi"></div>
<!-- Balok -->
<!-- Tambahkan ID unik pada setiap balok agar gampang mengatur tingginya nanti -->
<div id="balok-a" class="balok a"></div>
<div id="balok-b" class="balok b"></div>
<div id="balok-c" class="balok c"></div>
<div id="balok-d" class="balok d"></div>
<div id="balok-e" class="balok e"></div>
<div id="balok-f" class="balok f"></div>
<div id="balok-g" class="balok g"></div>
<!-- Data -->
<div class="data a">Senin</div>
<div class="data b">Selasa</div>
<div class="data c">Rabu</div>
<div class="data d">Kamis</div>
<div class="data e">Jumat</div>
<div class="data f">Sabtu</div>
<div class="data g">Minggu</div>
</div>Menata CSS
Selanjutnya adalah menata ulang warna, margin dan border CSS yang telah kita buat sehingga bisa membentuk diagram batang yang utuh.
<style>
.diagram {
display: grid;
/* "grid-template-columns" digunakan untuk mengatur jumlah dan ukuran kolom */
grid-template-columns: 50px 70px 70px 70px 70px 70px 70px 70px;
/* "grid-template-rows" digunakan untuk mengatur jumlah dan ukuran baris */
grid-template-rows: 40px 40px 40px 40px 40px 40px 40px 40px 40px 30px;
width: 540px;
height: 390px;
margin: 30px;
}
.frekuensi,
.balok,
.data {
padding: 0;
}
.frekuensi {
grid-column: 1;
display: flex;
align-items: flex-end;
justify-content: flex-end;
}
.frekuensi:not(:nth-child(10)) {
border-right: solid .2em #2c1544;
}
.frekuensi:not(:nth-child(10)):after {
content: "";
display: block;
border-bottom: solid .1em #2c1544;
width: 0.3em;
transform: translateY(0.1em);
}
.frekuensi span {
transform: translate(-0.2em, 0.5em);
}
.balok {
grid-row: 2 / span 8;
background-color: #fddd4e;
margin: 0 10px;
display: flex;
align-self: flex-end;
}
.data {
margin-left: -.2em;
border-top: solid .2em #2c1544;
grid-row: 10;
text-align: center;
}
.balok.a,
.data.a {
grid-column: 2;
}
.balok.b,
.data.b {
grid-column: 3;
}
.balok.c,
.data.c {
grid-column: 4;
}
.balok.d,
.data.d {
grid-column: 5;
}
.balok.e,
.data.e {
grid-column: 6;
}
.balok.f,
.data.f {
grid-column: 7;
}
.balok.g,
.data.g {
grid-column: 8;
}
</style>
<div class="diagram">
<!-- HTML -->
</div>Maka hasilnya akan seperti ini
Mengatur tinggi balok
Seperti yang kita lihat diatas, balok pada diagramnya belum muncul, itu disebabkan karena kita belum menmasukkan nilai height atau tinggi pada balok. Sekarang mari kita memasukkan nilai height, tinggi setiap balok sesuai dengan data yang telah kita buat. Caranya tinggal mengatur height setiap balok pada CSS sesua dengan tabel data. Akan tetapi kita harus mengubah frekuensi pada data menjadi pesentase menggunakan rumus persentase % = frekuensi / frekuensi total x 100. Misalnya frekuensi pada senin adalah 600, maka kita dapat menghitung persentase frekuensinya persentase % = 600 / 800 x 100 = 75%
/* Atur Tinggi Balok */
/* Senin */
#balok-a {
height: 75%;
}
/* Selasa */
#balok-b {
height: 93.75%;
}
/* Rabu */
#balok-c {
height: 90%;
}
/* Kamis */
#balok-d {
height: 100%;
}
/* Jumat */
#balok-e {
height: 72.6%;
}
/* Sabtu */
#balok-f {
height: 53.75%;
}
/* Minggu */
#balok-g {
height: 50%;
}Maka hasilnya akan seperti ini
Demikian cara membuat diagram pada HTML menggunakan CSS grid, apabila ada pertanyaan jangan ragu untuk bertanya pada kolom komentar.