Bootstrap adalah kerangka kerja CSS dan JavaScript yang populer digunakan untuk membangun desain web responsif. Salah satu fitur Bootstrap yang berguna adalah kemampuan untuk membuat grafik dengan mudah, termasuk grafik donat atau doughnut. Dalam artikel ini, saya akan membahas cara membuat grafik dougnut menggunakan Bootstrap.


Langkah 1: Persiapan

Sebelum memulai, pastikan Anda telah menyiapkan file HTML dan CSS. Anda juga perlu menambahkan file Bootstrap CSS dan JavaScript ke halaman HTML Anda. Anda dapat melakukannya dengan menambahkan kode berikut di dalam tag head:

php
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

Langkah 2: Membuat Container

Langkah pertama dalam membuat grafik dougnut adalah membuat sebuah container untuk grafik tersebut. Anda dapat membuat container dengan menambahkan kode berikut di dalam tag body:

php
<div class="container">
  
<canvas id="myChart"></canvas>

</div>

Kode di atas membuat sebuah container dengan kelas "container" dan sebuah elemen canvas dengan ID "myChart". Elemen canvas ini akan digunakan untuk membuat grafik.

Langkah 3: Membuat Script

Setelah membuat container, selanjutnya adalah membuat script yang akan menggambar grafik. Anda dapat menggunakan library Chart.js untuk membuat grafik. Anda perlu menambahkan file Chart.js ke halaman HTML Anda dengan menambahkan kode berikut di dalam tag head:

php
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>

Setelah menambahkan file Chart.js, Anda dapat membuat script yang akan menggambar grafik dougnut dengan menambahkan kode berikut di dalam tag body:

php
<script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
        labels: ["Red", "Blue", "Yellow"],
        datasets: [{
            backgroundColor: [
                "#FF6384",
                "#36A2EB",
                "#FFCE56"
            ],
            data: [10, 20, 30]
        }]
    }
});
</script>

Kode di atas membuat sebuah variabel ctx yang mengacu pada elemen canvas dengan ID "myChart". Selanjutnya, kode membuat sebuah objek myChart dengan menggunakan konstruktor Chart() dari library Chart.js. Objek myChart diatur untuk menggambar grafik dougnut dengan menggunakan tipe "doughnut". Data yang digunakan untuk menggambar grafik terdiri dari array labels dan array data. Array labels berisi label untuk setiap bagian dari grafik, sedangkan array data berisi jumlah setiap bagian. Array backgroundColor berisi warna untuk setiap bagian dari grafik.

Langkah 4: Membuat Style

Setelah membuat script, Anda dapat menambahkan style ke grafik dougnut. Anda dapat menambahkan style dengan menambahkan kode berikut di dalam tag head:

php
<style>
.container {
    width: 50%;
    margin: 0 auto;
    text-align: center;
}
</style>

Kode di atas membuat sebuah style untuk container dengan lebar 50% dan margin otomatis. Style juga mengatur teks pada container untuk ditengahkan.

Anda dapat mengubah label dan data pada script untuk membuat grafik dougnut yang sesuai dengan kebutuhan Anda. Anda juga dapat menyesuaikan style pada container dan grafik dougnut untuk mencocokkan dengan desain halaman web Anda.

Kesimpulan

Dalam artikel ini, saya telah menjelaskan cara membuat grafik dougnut menggunakan Bootstrap. Dengan menggunakan library Chart.js dan sedikit CSS, Anda dapat membuat grafik dougnut dengan mudah dan cepat. Grafik dougnut dapat digunakan untuk menampilkan data dalam bentuk visual yang mudah dipahami oleh pengguna. Dengan menyesuaikan label, data, dan style, Anda dapat membuat grafik dougnut yang sesuai dengan kebutuhan dan desain halaman web Anda.