Cara Membuat Pie Chart Menggunakan HTML dan Chart.js -

Hallo sahabat Dumetschool bertemu kembali dalam tutorial kursuswebdesign, pada kesempatan kali ini saya akan membahas tentang Cara Membuat Pie Chart menggunakan HTML dan Chart.js . Jika kita ingin membuat visualisasi statistik, grafik yang akan digunakan dalam presentasi ini merupakan cara tepat untuk mewakilinya. Dalam memahami data menjadi mudah dan jelas dengan penggunaan grafik. Ada berbagai contoh library grafik seperti Google Charts, Highchart, Chart.js, dan banyak lagi. Pada kasus ini saya akan membuat contoh untuk menampilan grafik menggunakan library Chart.js. Dalam membuat tampilan grafik sederhana menggunakan library chart.js sangat mudah. Sahabat bisa langsung mendownload library chart.js disini ,jika sudah simpan file dalam folder seperti berikut:

Langkah selanjutnya persiapkan struktur HTMLnya, dalam struktur HTML saya memiliki sebuah tag canvas untuk wadah tampilan chart yang akan dibuat, coba sahabat ketikan script dibawah ini :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Memnbuat Pie Chart Menggunakan HTML dan Chart.js</title>
  <script src="js/Chart.js"></script>
</head>
<body>
    <canvas id="inicanvas"></canvas>
    <script>

        var ctx = document.getElementById("inicanvas").getContext("2d");
        // tampilan chart
        var piechart = new Chart(ctx,{type: 'pie',
          data : {
        // label nama setiap Value
        labels:[
                  'Web Master',
                  'Web Design',
                  'Web Programming',
                  'Mobile Apps',
                  'Digital Marketing'
          ],
        datasets: [{
          // Jumlah Value yang ditampilkan
           data:[60,60,60,80,100],

          backgroundColor:[
                 '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)'
                 ]
        }],
        }
        });

    </script>
</body>
</html>

Jika sahabat sudah selesai mengetikan script dengan benar maka tampilanya seperti berikut:

Demikian pembahasan artikel ini tentang cara membuat pie chart menggunakan HTML dan Chart.js ,sampai bertemu kembali pada atikel selanjutnya, semoga bermanfaat dan selamat mencoba.

Terima kasih

Cara Membuat Pie Chart Menggunakan HTML dan Chart.js

Kategori