Kami akan membuat diagram lingkaran untuk dua tim yaitu, TeamA dan TeamB dan skor mereka untuk 5 pertandingan - match1, match2,. match5
Struktur proyek
Kami akan mulai dengan struktur proyek berikut
Di dalam folder css kita akan membuat file default.css. Ini akan berisi stylesheet default
Dan di dalam folder js kita akan membuat file pie.js. Dalam file ini kita akan menulis kode untuk membuat grafik pie
Dan di dalam folder proyek kita akan membuat file pie.html
Sekarang struktur proyek akan terlihat seperti berikut
Ada beberapa file lain yang ditampilkan pada gambar di atas dari tutorial saya yang lain
pai. html
Salin struktur HTML dari index. html dan pastikan Anda menyertakan file javascript jQuery dan ChartJS
Sekarang di head termasuk default. file css yang kita buat dan simpan di folder css
Di dalam body_ buat div dan berikan kelas .chart-container { width: 80%; height: 480px; margin: 0 auto; } .pie-chart-container { height: 360px; width: 360px; float: left; } 0. Di dalamnya kita membuat dua div yang memiliki kelas .chart-container { width: 80%; height: 480px; margin: 0 auto; } .pie-chart-container { height: 360px; width: 360px; float: left; } 1. Dan di dalam masing-masing div ini buat kanvas dan beri mereka masing-masing id .chart-container { width: 80%; height: 480px; margin: 0 auto; } .pie-chart-container { height: 360px; width: 360px; float: left; } 2 dan .chart-container { width: 80%; height: 480px; margin: 0 auto; } .pie-chart-container { height: 360px; width: 360px; float: left; } 3
Dan terakhir sebelum penutupan tag body_ sertakan kue. js file javascript yang kami buat di dalam folder js
Jadi, sekarang pai kita. html file akan terlihat seperti berikut
ChartJS - Pie
bawaan. css
Default. file css akan berisi yang berikut ini
.chart-container { width: 80%; height: 480px; margin: 0 auto; } .pie-chart-container { height: 360px; width: 360px; float: left; }Pada kode di atas kita mengatur lebar, tinggi dan margin kelas .chart-container { width: 80%; height: 480px; margin: 0 auto; } .pie-chart-container { height: 360px; width: 360px; float: left; } 5 dan untuk .chart-container { width: 80%; height: 480px; margin: 0 auto; } .pie-chart-container { height: 360px; width: 360px; float: left; } 1 kita mengatur lebar dan tinggi menjadi 360px dan menempatkannya berdampingan dengan mengatur float ke kiri
JavaScript
Untuk menggambar diagram lingkaran kita akan menulis beberapa javascript
Kanvas
Pertama kita akan mendapatkan dua canvas menggunakan id masing-masing .chart-container { width: 80%; height: 480px; margin: 0 auto; } .pie-chart-container { height: 360px; width: 360px; float: left; } 2 dan .chart-container { width: 80%; height: 480px; margin: 0 auto; } .pie-chart-container { height: 360px; width: 360px; float: left; } 3 dengan menulis kode berikut
//get the pie chart canvas var ctx1 = $("#pie-chartcanvas-1"); var ctx2 = $("#pie-chartcanvas-2");Pilihan
Sekarang kita akan menentukan pilihan untuk grafik. Untuk ini kita akan membuat variabel objek .chart-container { width: 80%; height: 480px; margin: 0 auto; } .pie-chart-container { height: 360px; width: 360px; float: left; } _9 dan mengatur responsif, judul, dan legenda
Ini mirip dengan opsi grafik garis dan Anda dapat merujuk tutorial grafik garis
Kami akan menyetel //get the pie chart canvas var ctx1 = $("#pie-chartcanvas-1"); var ctx2 = $("#pie-chartcanvas-2"); _0 ke true untuk membuat grafik responsif
Untuk membuat judul untuk grafik pai, kami akan menetapkan yang berikut untuk objek data //get the pie chart canvas var ctx1 = $("#pie-chartcanvas-1"); var ctx2 = $("#pie-chartcanvas-2"); 1
- menampilkan. kami menyetel ini ke //get the pie chart canvas var ctx1 = $("#pie-chartcanvas-1"); var ctx2 = $("#pie-chartcanvas-2"); _2 untuk memunculkan judul
- posisi. kami menyetel ini ke //get the pie chart canvas var ctx1 = $("#pie-chartcanvas-1"); var ctx2 = $("#pie-chartcanvas-2"); _3 untuk membuat judul muncul di bagian atas grafik pai
- teks. ini disetel ke //get the pie chart canvas var ctx1 = $("#pie-chartcanvas-1"); var ctx2 = $("#pie-chartcanvas-2"); _4
- ukuran huruf. ini mengontrol ukuran font judul
- warna huruf. ini mengontrol warna font judul
Untuk membuat legenda bagan pai, kami menyetel properti //get the pie chart canvas var ctx1 = $("#pie-chartcanvas-1"); var ctx2 = $("#pie-chartcanvas-2"); 5
- menampilkan. ini disetel ke //get the pie chart canvas var ctx1 = $("#pie-chartcanvas-1"); var ctx2 = $("#pie-chartcanvas-2"); _2 untuk menampilkan legenda
- posisi. ini disetel ke //get the pie chart canvas var ctx1 = $("#pie-chartcanvas-1"); var ctx2 = $("#pie-chartcanvas-2"); _7 yang menentukan posisi legenda
- label. ini untuk warna dan ukuran font legenda
Anda dapat memeriksa dokumentasi ChartJS dan mengatur beberapa properti lainnya juga. Tapi untuk tutorial ini kita akan tetap berpegang pada properti yang disebutkan di atas
Jadi, opsinya akan terlihat seperti berikut ini
//options var options = { responsive: true, title: { display: true, position: "top", text: "Pie Chart", fontSize: 18, fontColor: "#111" }, legend: { display: true, position: "bottom", labels: { fontColor: "#333", fontSize: 16 } } };Data
Sekarang saatnya membuat dua variabel data //get the pie chart canvas var ctx1 = $("#pie-chartcanvas-1"); var ctx2 = $("#pie-chartcanvas-2"); 8 dan //get the pie chart canvas var ctx1 = $("#pie-chartcanvas-1"); var ctx2 = $("#pie-chartcanvas-2"); 9 yang akan menyimpan skor kedua tim - TimA dan TimB untuk masing-masing 5 pertandingan
- label. ini adalah larik yang berisi nama yang cocok
- kumpulan data. ini adalah larik dua objek, satu untuk setiap skor tim
Setiap elemen objek dari //options var options = { responsive: true, title: { display: true, position: "top", text: "Pie Chart", fontSize: 18, fontColor: "#111" }, legend: { display: true, position: "bottom", labels: { fontColor: "#333", fontSize: 16 } } }; _0 berisi properti berikut
- label. label yang akan ditampilkan saat mouse mengarahkan pai
- data. array yang berisi skor untuk setiap pertandingan
- warna latar belakang. array nilai hex atau nama warna untuk segmen pai
- borderColor. array nilai hex atau nama warna untuk segmen pai
- borderWidth. ini untuk lebar batas segmen pai
Instansiasi kelas Bagan
Kami membuat dua variabel chart1 dan chart2 dan instantiate kelas Chart. Kami melewati //options var options = { responsive: true, title: { display: true, position: "top", text: "Pie Chart", fontSize: 18, fontColor: "#111" }, legend: { display: true, position: "bottom", labels: { fontColor: "#333", fontSize: 16 } } }; 1 dan //options var options = { responsive: true, title: { display: true, position: "top", text: "Pie Chart", fontSize: 18, fontColor: "#111" }, legend: { display: true, position: "bottom", labels: { fontColor: "#333", fontSize: 16 } } }; 2 yang menyimpan kanvas dan objek data
Objek data berisi properti //options var options = { responsive: true, title: { display: true, position: "top", text: "Pie Chart", fontSize: 18, fontColor: "#111" }, legend: { display: true, position: "bottom", labels: { fontColor: "#333", fontSize: 16 } } }; _3 yang disetel ke //options var options = { responsive: true, title: { display: true, position: "top", text: "Pie Chart", fontSize: 18, fontColor: "#111" }, legend: { display: true, position: "bottom", labels: { fontColor: "#333", fontSize: 16 } } }; 4, properti data yang disetel ke variabel //options var options = { responsive: true, title: { display: true, position: "top", text: "Pie Chart", fontSize: 18, fontColor: "#111" }, legend: { display: true, position: "bottom", labels: { fontColor: "#333", fontSize: 16 } } }; 5 dan properti opsi yang disetel ke .chart-container { width: 80%; height: 480px; margin: 0 auto; } .pie-chart-container { height: 360px; width: 360px; float: left; } 9