- Cari disini...
- Browse
Katalog Kelas
Ikuti materi yang kamu butuhkan
Roadmap
Belajar online dengan terarah
Bootcamp
Codepolitan x Catamyst
- Explore
Tutorial & Artikel
Temukan Artikel menarik
Podcast
Podcast seputar pemrograman
Webinar
Ikuti Berbagai Webinar
Event
Temukan Event menarik
Beasiswa
Program Beasiswa
Discord
Komunitas Discord
Forum
Diskusi antar Programmer
Leaderboard
Ranking siswa Codepolitan
- Partnership
For Company
Solusi tepat untuk perusahaan
For School
Kerjasama untuk sekolah
For Campus
Kerjasama untuk kampus
For Mentor
Peluang penghasilan untuk mentor
- Career
LoginRegister
Halo semuanya, kembali lagi di sahretech. Pada kesempatan kali ini saya mau berbagi tutorial cara membuat chart yang indah di vue js 3. Bagaimana caranya?, ayo ikuti pembahasannya di bawah ini.
Chart atau diagram adalah hal yang penting untuk dikuasai, apalagi jika kalian bekerja dalam membuat aplikasi laporan. Pasalnya chart atau diagram membuat data yang besar menjadi mudah dipahami dengan merepresentasikan ke dalam bentuk chart tertentu.
Saat ini membuat chart sangat mudah, hampir di setiap bahasa pemrograman dan framework memiliki package atau library yang mendukung pembuatan chart, tidak terkecuali di vue js. Pada kesempatan kali ini, kita akan membuat 3 macam chart dengan library chartkick yang sangat mudah diimplementasikan di vue js. Untuk melihat hasil akhirnya, kalian bisa scroll ke step 5 pada post di bawah ini.
Cara Membuat Beragam Chart di Vue Js 3
1. Lakukan instalasi vue js atau gunakan project vue js yang sudah ada. Untuk cara instalasinya,
bisa kalian ikuti tutorialnya di link berikut ini. //www.sahretech.com/2020/11/cara-install-vue-js-dengan-vue-cli.html
2. Install library vue chartkick dengan menjalankan perintah di bawah ini.
npm install vue-chartkick chart.js
3. Buka file main.js, Silahkan diperhatikan script di bawah ini. Di bawah ini, terlebih dahulu kita import library chartkick agar dapat digunakan secara global di halaman vue js apapun.
import { createApp } from 'vue' import App from './App.vue' import VueChartkick from 'vue-chartkick' import 'chartkick/chart.js' const app = createApp(App) app.use(VueChartkick) app.mount('#app')
4. Selanjutnya kita tinggal menggunakan library chartkick di file mana saja. Berikut ini contoh penggunaan chartkick dalam bentuk line-chart, bar-chart, column-chart, dan pie-chart.
<template> <div class="container"> <h2 style="text-align: center;">Chartkick</h2> <p style="text-align: center;">Latihan Membuat Chart dan Diagram pada Vue JS 3</p> <h3>LineChart</h3> <p>Statistik Data Penjualan</p> <line-chart :data="penjualan[0]"></line-chart> <br><br><br> <h3>Bar Chart</h3> <p>Perbandingan Jumlah Laki-laki dan Perempuan</p> <bar-chart :data="gender"></bar-chart> <br><br><br> <h3>Column Chart</h3> <p>Perbandingan Jumlah Bahasa Pemrograman</p> <column-chart :data="framework"></column-chart> <br><br><br> <h3>Pie Chart</h3> <p>Perbandingan Jumlah Buah</p> <pie-chart :data="fruit"></pie-chart> </div> </template> <script> export default { name: "Chart", data(){ return { penjualan: [ { '2017-05-13': 2, '2017-05-14': 5, '2017-05-15': 6, '2017-05-16': 8, '2017-05-17': 10 }, ], gender: [ ['Laki-laki', 20], ['Perempuan', 27] ], framework: [ ['PHP', 32], ['Javascript', 46], ['Python', 28] ], fruit: [ ['Blueberry', 44], ['Strawberry', 23], ['coconut', 12] ] } } }; </script> <style> .container { padding-left: 100px; padding-right: 100px; } </style>
5. Semua step sudah kita jalankan. Sekarang saatnya melakukan uji coba. Jika berhasil maka tampilanya akan tampak seperti gambar di bawah ini
|
Contoh Akhir |
Customisasi Chart
Di atas adalah contoh sederhana penggunaan chartkick pada vue js. Selain itu kalian juga dapat melakukan customisasi chart dengan menambahkan beberapa attribute sesuai keinginan kalian masing-masing.
<line-chart :download="true"></line-chart> <line-chart :colors="['#b00', '#666']"></line-chart> <line-chart legend="bottom"></line-chart> <line-chart suffix="%"></line-chart> <line-chart loading="Loading..."></line-chart>
Silahkan mencoba beberapa attribute di atas pada chart yang sudah dibuat. Selain itu, kalian juga bisa melakukan lebih banyak customisasi dengan mengikuti dokumentasinya di link ini //chartkick.com/vue
Ok, sekarang kalian sudah berhasil membuat chart atau diagram di vue js, mudah bukan?. Selanjutnya kalian bisa melakukan improvisasi secara mandiri dengan menggunakan data api asli, dan mengolahnya ke dalam aplikasi.
Sekian tutorial kali ini tentang cara membuat chart atau diagram pada vue js 3. Semoga bermanfaat, jika ada kesulitan silahkan tanyakan langsung di kolom komentar atau tanya langsung di fanspage sahretech. Sekian dan terima kasih.