Cara Membuat Data Chart Pie Dengan Menggunakan AngularJs

04/02/2019    Shelli Ripati    46     Website

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.

No data.

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More