Cara menggunakan javascript diagram

• 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. https://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 https://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.