Cara Membuat Data Chart Pie Dengan Menggunakan AngularJs

Data Chart Pie adalah tampilan data berupa chart pie. Menampilkan data dalam bentuk chart memudahkan kita membaca sebuah data. Dan pada artikel ini saya akan membahas tentang Cara Membuat Data Chart Pie Dengan Menggunakan AngularJs.

Cara Membuat Data Chart Pie Dengan Menggunakan AngularJs sangat mudah. Sebelum membuat data chart pie tentu kita butuh mencantukan link angularjs seperti di bawah ini, teman teman bisa mendapatkannya di https://angularjs.org/ .

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular.min.js"></script>

Link selanjutnya yaitu chartjs yang akan kita pakai seperti di bawah ini. Atau teman-teman boleh kunjungi link ini  https://www.chartjs.org/docs/latest/getting-started/ .

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

Dan link terakhir teman-teman bisa downloadnya di http://jtblin.github.io/angular-chart.js/  .

Jika sudah semua maka kita akan membuat struktur htmlnya seperti berikut ini.

<!DOCTYPE html>

<html>

<head>

               <title>Cara Membuat Data Chart Pie Dengan Menggunakan AngularJs</title>

               <style>

                              .container{

                                             width: 500px;

                                             margin:auto;

                                             text-align: center;

                              }

               </style>

               <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular.min.js"></script>         

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

 <script src="angular-chart.min.js"></script>

</head>

<body ng-app="myApp" ng-controller="myCtrl">

<div class="container">

               <h1>Cara Membuat Data Chart Pie Dengan Menggunakan AngularJs</h1>

               <canvas id="pie" class="chart chart-pie"

                 chart-data="data" chart-labels="labels">

               </canvas>          

</div>

</body>

</html>

Untuk struktur di atas saya menggunakan tag canvas dengan attribute yang di butuhkan. Attribute class adalah tipe dari chart yang akan ditampilkan. Attribute chart-data adalah nama parameter dari variable data yang berisi nilai berupa angka atau integer. Attribute chart-labels dengan parameter labels adalah data untuk mengisi judul dari nilai atau label dari nilai yang ditampilkan.

Dan langkah terakhir kita akan membuat controller dengan data yang akan di tampilkan seperti berikut ini.

<script>

               var app = angular.module("myApp", ["chart.js"]);

               app.controller("myCtrl", function ($scope) {

                 $scope.labels = ["Web Design", "Web Programming",

                                             "Digital Marketing", "Design Graphic", "Mobile Apps",

                                             "Coding For Kids", "Motion Graphic"];

                 $scope.data = [300, 500, 100, 200, 500, 450, 350];

               });

</script>

Jika teman-teman buka di browser masing-masing maka akan tampil seperti pada gambar di bawah ini.

Cara Membuat Data Chart Pie Dengan AngularJs

Demikian artikel tentang Cara Membuat Data Chart Pie Dengan Menggunakan AngularJs. Semoga dapat bermanfaat dan selamat mencoba.

4 Februari 2019

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat