Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Data Visualization

Bagaimana Cara membuat grafik baris dengan Chart.js

by
Difficulty:BeginnerLength:ShortLanguages:

Indonesian (Bahasa Indonesia) translation by Muhammad Hakim Almadani (you can also view the original English article)

Final product image
What You'll Be Creating

Dalam tutorial dari video kuliah saya ini, Data desain dengan Chart.js, Anda akan membuat grafik garis sederhana dengan menggunakan kerangka kerja Chart.js untuk plot serangkaian poin pada grid. Hingga itu selesai dilakukan, kami akan melihat kerangka Chart.js dan anda akan melakukan pekerjaan berat sisanya.

Anda dapat menemukan source codenya di sini:

Cara membuat baris grafik dengan Chart.js

Mengatur kanvas

Mulai dengan membuka CodePen untuk tutorial ini dan klik pada tombol Fork untuk membuat salinan baru dari itu. Yang akan membawa kita ke URL baru, di mana kita memiliki salinan kita sendiri segar yang memiliki pengaturan yang sama diterapkan untuk itu.

Ketika kita membuat tabel menggunakan kerangka Chart.js, kita akan membutuhkan sebuah kanvas elemen. karena library Chart JS bergantung pada kanvas elemen. Jadi membuat elemen kanvas di bagian HTML, memberikan ID dari line-chart, dan kemudian menutup elemen kanvas.

Kita tidak akan perlu khawatir tentang gaya atau ukuran untuk kanvas elemen, karena bahkan jika kita mencoba untuk mengatur ukuran itu menggunakan CSS atau menggunakan atribut pada elemen HTML itu sendiri, jika tidak dari selain itu maka tidak akan bekerja. Cara Chart.js bekerja, itu hanya akan mengubah ukuran kanvas itu untuk ukuran induknya, sehingga masih akan mengambil seluruh layar bagaimanapun. Kemudian kita akan melihat bagaimana ukuran sekitarnya, tetapi untuk sekarang mari kita hanya beralih ke dalam JavaScript dan membuat grafik sendiri.

Membuat konteks menggunakan JavaScript

Hal pertama yang kita butuhkan dalam JavaScript adalah konteks tabel, yang pada dasarnya hanyalah cara kita bahwa mengatakan elemen akan menerapkan chart to, yang merupakan objek kanvas.

Jadi kita akan menciptakan sebuah variabel disebut konteks, atau ctx untuk jangka pendek, dan kami akan menetapkan ini sama dengan objek kanvas. Dan kita akan mengarah ke objek kanvas menggunakan jQuery. Jadi saya akan menggunakan tanda dolar dan tanda kurung, dan di dalam tanda kurung, kita akan memiliki seperangkat tanda kutip, dan di dalam tanda kutip, kita akan menggunakan CSS selector untuk objek kanvas. Dan kami menunjuk ke ID objek itu, jadi kita akan ketik # dan kemudian ID, yang merupakan line-chart, dan kemudian tambahkan semi-kolon pada akhir pernyataan.

Tambahkan kode JavaScript untuk Plot Chart/bagan

Sekarang bahwa kita telah melakukan itu, kita hanya perlu satu lagi baris kode untuk membuat tabel kami. Sekarang itu akan menjadi garis kompleks kode, dan itu benar-benar akan berakhir terlihat seperti beberapa baris, tapi itu hanya akan menjadi satu pernyataan JavaScript. Berikut ini adalah:

Full JavaScript code for creating the chart

Sekarang saya berjalan Anda melalui langkah demi langkah dan menjelaskan apa yang terjadi.

Kita mulai dengan menciptakan sebuah variabel yang disebut lineChart, dan menggunakan sintaks Chart.js, kita menetapkan ini sama dengan new Chart.

Kami menambahkan tanda kurung terbuka dan tertutup, dan dalam kurung-kita memerlukan dua hal:

  1. Obyek yang kami menerapkan bagan ini ke, atau konteks yang kami telah dibuat dan disimpan dalam variabel disebut ctx.
  2. Sebuah objek yang berisi semua data kami dan gaya untuk bagan ini tertentu.

Kita bisa memikirkan obyek kedua ini sebagai satu set pasangan nilai properti. Dan properti pertama kita perlu akan menentukan apa jenis bagan ini adalah. Dan nama properti itu adalah type. Dan kemudian kita menambahkan 'line', dan memberitahu Chart.js bahwa ini adalah grafik garis yang kami menciptakan.

Dan kemudian kita akan ketik koma, dan turun ke baris berikutnya. Dan kemudian hal berikutnya yang kita butuhkan adalah semua data yang akan pergi ke bagan. Jadi kita akan ketik data kata. Dan kemudian properti data ini akan menjadi sebuah obyek. Jadi kita akan menggunakan kurung kurawal untuk membuat objek, dan di dalam objek ini kita akan memiliki jumlah pasangan nilai properti lainnya.

Dalam objek baru ini, kita perlu beberapa hal.

Hal pertama yang kita butuhkan adalah semua label yang akan pergi sepanjang bagian bawah tabel kami. Jadi mari kita mengatakan bahwa kita ingin grafik yang memetakan harga produk selama tahun atau mungkin harga saham saham tertentu untuk kursus setahun. Jadi untuk label kami, kita akan memiliki setiap bulan setiap tahun.

Hal berikutnya yang kita butuhkan adalah sebuah array data set. Anda dapat memiliki beberapa set data untuk tabel tunggal, tetapi kami hanya akan perlu khawatir tentang satu set data untuk sekarang. Jadi nama properti ini adalah datasets, dan ini akan menjadi sebuah array object.

Ketika kita menciptakan array yang menggunakan kurung, kita dapat melihat grafik telah sudah muncul.

Preliminary chart only showing blank data

Kami tidak memiliki data pada tabel yang belum, jadi itu tidak tahu bagaimana untuk skala semua nomor di sisi kiri grafik, tapi sekali kita mulai memasukkan beberapa nilai, tampilan yang akan mengubah.

Anda benar-benar perlu memperhatikan apa yang Anda lakukan ketika menambahkan nilai-nilai. Kita perlu memastikan bahwa elemen datasets kami dimulai dengan array, dan di dalam array itu, itu memiliki objek.

Dalam objek, kita akan memiliki pertama label untuk tahun 2015. Dan kemudian satu-satunya hal yang akan kita miliki di sini adalah daftar nilai-nilai, yang terkandung dalam atribut lain yang disebut data. Pada dasarnya ini adalah hanya 12 nomor acak untuk contoh ini.

Melihat Chart.js Plot pada bagan

Setelah kita sisipkan dalam angka-angka, kita akan melihat bahwa tabel kami datang untuk hidup.

Final chart created with Chartjs

Jadi sekarang kita melihat itu, pertama-tama, kami kiri axis telah berubah untuk mencocokkan data yang kami telah memasukkan. Kita juga dapat melihat satu set data selama satu tahun, dan label yang kami menambahkan untuk 2015 adalah di bagian atas.

Jadi itu adalah bagaimana Anda membuat grafik garis sederhana menggunakan Chart.js.

Lihat kursus penuh

Data desain (atau "visualisasi data") adalah seni menampilkan informasi dengan cara yang mudah untuk mengkonsumsi dan mudah untuk memahami. Dalam kursus lengkap, Data desain dengan Chart.js, Anda akan belajar bagaimana menggunakan Chart.js untuk secara dinamis menampilkan data dengan grafik interaktif dan eye-catching.

Anda akan ambil bagan awal baris ini lebih jauh, misalnya dengan menerapkan gaya yang berbeda dan menambahkan beberapa data set. Kemudian Anda akan belajar cara membuat grafik batang, diagram lingkaran, dan bahkan animasi grafik.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.