Bagan pai dan donat mungkin merupakan bagan yang paling umum digunakan. Mereka dibagi menjadi beberapa segmen, busur setiap segmen menunjukkan nilai proporsional dari setiap bagian data
Mereka sangat baik dalam menunjukkan proporsi relasional antara data
Bagan pai dan donat secara efektif adalah kelas yang sama di Bagan. js, tetapi memiliki satu nilai default yang berbeda - cutout mereka. Ini sama dengan bagian dalam mana yang harus dipotong. Ini default ke 0_ untuk diagram lingkaran, dan '50%' untuk donat
Mereka juga terdaftar di bawah dua alias di Chart inti. Selain nilai default yang berbeda, dan alias yang berbeda, keduanya persis sama
const config = {
type: 'doughnut',
data: data,
}; const data = {
labels: [
'Red',
'Blue',
'Yellow'
],
datasets: [{
label: 'My First Dataset',
data: [300, 50, 100],
backgroundColor: [
'rgb(255, 99, 132)',
'rgb(54, 162, 235)',
'rgb(255, 205, 86)'
],
hoverOffset: 4
}]
};_ const config = {
type: 'pie',
data: data,
}; const data = {
labels: [
'Red',
'Blue',
'Yellow'
],
datasets: [{
label: 'My First Dataset',
data: [300, 50, 100],
backgroundColor: [
'rgb(255, 99, 132)',
'rgb(54, 162, 235)',
'rgb(255, 205, 86)'
],
hoverOffset: 4
}]
};_
Properti Kumpulan Data
Ruang nama
- data.datasets[index] - opsi hanya untuk kumpulan data ini
- options.datasets.doughnut_ - opsi untuk semua kumpulan data donat
- const data = { labels: [ 'Red', 'Blue', 'Yellow' ], datasets: [{ label: 'My First Dataset', data: [300, 50, 100], backgroundColor: [ 'rgb(255, 99, 132)', 'rgb(54, 162, 235)', 'rgb(255, 205, 86)' ], hoverOffset: 4 }] };_0 - opsi untuk semua kumpulan data pai
- const data = { labels: [ 'Red', 'Blue', 'Yellow' ], datasets: [{ label: 'My First Dataset', data: [300, 50, 100], backgroundColor: [ 'rgb(255, 99, 132)', 'rgb(54, 162, 235)', 'rgb(255, 205, 86)' ], hoverOffset: 4 }] };_1 - opsi untuk semua
- const data = { labels: [ 'Red', 'Blue', 'Yellow' ], datasets: [{ label: 'My First Dataset', data: [300, 50, 100], backgroundColor: [ 'rgb(255, 99, 132)', 'rgb(54, 162, 235)', 'rgb(255, 205, 86)' ], hoverOffset: 4 }] };_2 - opsi untuk seluruh bagan
Bagan donat/pai memungkinkan sejumlah properti ditentukan untuk setiap kumpulan data. Ini digunakan untuk mengatur properti tampilan untuk kumpulan data tertentu. Misalnya, warna busur kumpulan data biasanya diatur seperti ini
Semua nilai ini, jika const data = { labels: [ 'Red', 'Blue', 'Yellow' ], datasets: [{ label: 'My First Dataset', data: [300, 50, 100], backgroundColor: [ 'rgb(255, 99, 132)', 'rgb(54, 162, 235)', 'rgb(255, 205, 86)' ], hoverOffset: 4 }] };3, mundur ke cakupan yang dijelaskan dalam resolusi opsi
Umum
NameDescriptionconst data = { labels: [ 'Red', 'Blue', 'Yellow' ], datasets: [{ label: 'My First Dataset', data: [300, 50, 100], backgroundColor: [ 'rgb(255, 99, 132)', 'rgb(54, 162, 235)', 'rgb(255, 205, 86)' ], hoverOffset: 4 }] };_4Penggantian per-set data untuk sapuan yang dicakup oleh busurconst data = { labels: [ 'Red', 'Blue', 'Yellow' ], datasets: [{ label: 'My First Dataset', data: [300, 50, 100], backgroundColor: [ 'rgb(255, 99, 132)', 'rgb(54, 162, 235)', 'rgb(255, 205, 86)' ], hoverOffset: 4 }] };5Cara memotong relatif terhadap area grafik. Nilai positif memungkinkan luapan, klip nilai negatif yang banyak piksel di dalam chartArea. 0 = klip di chartArea. Kliping juga dapat dikonfigurasi per sisi. const data = { labels: [ 'Red', 'Blue', 'Yellow' ], datasets: [{ label: 'My First Dataset', data: [300, 50, 100], backgroundColor: [ 'rgb(255, 99, 132)', 'rgb(54, 162, 235)', 'rgb(255, 205, 86)' ], hoverOffset: 4 }] };7const data = { labels: [ 'Red', 'Blue', 'Yellow' ], datasets: [{ label: 'My First Dataset', data: [300, 50, 100], backgroundColor: [ 'rgb(255, 99, 132)', 'rgb(54, 162, 235)', 'rgb(255, 205, 86)' ], hoverOffset: 4 }] };8Penggantian set data untuk sudut awal untuk menggambar busur dariStyling
Gaya setiap busur dapat dikontrol dengan properti berikut
NameDescriptionconst data = { labels: [ 'Red', 'Blue', 'Yellow' ], datasets: [{ label: 'My First Dataset', data: [300, 50, 100], backgroundColor: [ 'rgb(255, 99, 132)', 'rgb(54, 162, 235)', 'rgb(255, 205, 86)' ], hoverOffset: 4 }] };9arc background color. const config = { type: 'pie', data: data, };0garis batas warna. const config = { type: 'pie', data: data, };1arc border join style. Lihat MDN (membuka jendela baru). const config = { type: 'pie', data: data, };2lebar batas busur (dalam piksel). const config = { type: 'pie', data: data, };3arc offset (dalam piksel). const config = { type: 'pie', data: data, };4Offset busur tetap (dalam piksel). Mirip dengan const config = { type: 'pie', data: data, };_3 tetapi berlaku untuk semua busur. const config = { type: 'pie', data: data, };6Ketebalan relatif dari kumpulan data. Memberikan nilai berat akan menyebabkan set data pai atau donat digambar dengan ketebalan relatif terhadap jumlah semua nilai berat set dataSemua nilai ini, jika const data = { labels: [ 'Red', 'Blue', 'Yellow' ], datasets: [{ label: 'My First Dataset', data: [300, 50, 100], backgroundColor: [ 'rgb(255, 99, 132)', 'rgb(54, 162, 235)', 'rgb(255, 205, 86)' ], hoverOffset: 4 }] };_3, mundur ke opsi terkait
Penyelarasan Perbatasan
Nilai berikut didukung untuk const config = { type: 'pie', data: data, };_9
Saat const data = { labels: [ 'Red', 'Blue', 'Yellow' ], datasets: [{ label: 'My First Dataset', data: [300, 50, 100], backgroundColor: [ 'rgb(255, 99, 132)', 'rgb(54, 162, 235)', 'rgb(255, 205, 86)' ], hoverOffset: 4 }] };_0 disetel, batas busur yang bersebelahan akan tumpang tindih. Saat const data = { labels: [ 'Red', 'Blue', 'Yellow' ], datasets: [{ label: 'My First Dataset', data: [300, 50, 100], backgroundColor: [ 'rgb(255, 99, 132)', 'rgb(54, 162, 235)', 'rgb(255, 205, 86)' ], hoverOffset: 4 }] };_1 disetel, dijamin semua batas tidak akan tumpang tindih
Radius Perbatasan
Jika nilai ini adalah angka, ini diterapkan ke semua sudut busur (outerStart, outerEnd, innerStart, innerRight). Jika nilai ini adalah objek, properti const data = { labels: [ 'Red', 'Blue', 'Yellow' ], datasets: [{ label: 'My First Dataset', data: [300, 50, 100], backgroundColor: [ 'rgb(255, 99, 132)', 'rgb(54, 162, 235)', 'rgb(255, 205, 86)' ], hoverOffset: 4 }] };_2 menentukan radius batas sudut awal terluar. Demikian pula, properti const data = { labels: [ 'Red', 'Blue', 'Yellow' ], datasets: [{ label: 'My First Dataset', data: [300, 50, 100], backgroundColor: [ 'rgb(255, 99, 132)', 'rgb(54, 162, 235)', 'rgb(255, 205, 86)' ], hoverOffset: 4 }] };_3, const data = { labels: [ 'Red', 'Blue', 'Yellow' ], datasets: [{ label: 'My First Dataset', data: [300, 50, 100], backgroundColor: [ 'rgb(255, 99, 132)', 'rgb(54, 162, 235)', 'rgb(255, 205, 86)' ], hoverOffset: 4 }] };4, dan const data = { labels: [ 'Red', 'Blue', 'Yellow' ], datasets: [{ label: 'My First Dataset', data: [300, 50, 100], backgroundColor: [ 'rgb(255, 99, 132)', 'rgb(54, 162, 235)', 'rgb(255, 205, 86)' ], hoverOffset: 4 }] };5 juga dapat ditentukan
Interaksi
Interaksi dengan setiap busur dapat dikontrol dengan properti berikut
NameDescriptionconst data = { labels: [ 'Red', 'Blue', 'Yellow' ], datasets: [{ label: 'My First Dataset', data: [300, 50, 100], backgroundColor: [ 'rgb(255, 99, 132)', 'rgb(54, 162, 235)', 'rgb(255, 205, 86)' ], hoverOffset: 4 }] };_6warna latar busur saat melayang. const data = { labels: [ 'Red', 'Blue', 'Yellow' ], datasets: [{ label: 'My First Dataset', data: [300, 50, 100], backgroundColor: [ 'rgb(255, 99, 132)', 'rgb(54, 162, 235)', 'rgb(255, 205, 86)' ], hoverOffset: 4 }] };_7warna batas busur saat melayang. const data = { labels: [ 'Red', 'Blue', 'Yellow' ], datasets: [{ label: 'My First Dataset', data: [300, 50, 100], backgroundColor: [ 'rgb(255, 99, 132)', 'rgb(54, 162, 235)', 'rgb(255, 205, 86)' ], hoverOffset: 4 }] };_8arc border join style saat melayang. Lihat MDN (membuka jendela baru). const data = { labels: [ 'Red', 'Blue', 'Yellow' ], datasets: [{ label: 'My First Dataset', data: [300, 50, 100], backgroundColor: [ 'rgb(255, 99, 132)', 'rgb(54, 162, 235)', 'rgb(255, 205, 86)' ], hoverOffset: 4 }] };_9lebar batas busur saat melayang (dalam piksel). cutout0arc offset saat melayang (dalam piksel)Semua nilai ini, jika const data = { labels: [ 'Red', 'Blue', 'Yellow' ], datasets: [{ label: 'My First Dataset', data: [300, 50, 100], backgroundColor: [ 'rgb(255, 99, 132)', 'rgb(54, 162, 235)', 'rgb(255, 205, 86)' ], hoverOffset: 4 }] };_3, mundur ke opsi terkait
Opsi Konfigurasi
Ini adalah opsi penyesuaian khusus untuk bagan Pai & Donat. Opsi ini dicari pada akses, dan membentuk bersama dengan konfigurasi bagan global opsi bagan
NameTypeDefaultDescriptioncutoutcutout4. cutout5cutout6 - untuk donat, 0 - untuk paiBagian bagan yang dipotong dari tengah. Jika cutout5 dan diakhiri dengan '%', persentase dari radius grafik. cutout_4 dianggap sebagai piksel. 00cutout4. cutout5________36______3Jari-jari luar grafik. Jika cutout5 dan diakhiri dengan '%', persentase radius maksimum. cutout_4 dianggap sebagai piksel. const data = { labels: [ 'Red', 'Blue', 'Yellow' ], datasets: [{ label: 'My First Dataset', data: [300, 50, 100], backgroundColor: [ 'rgb(255, 99, 132)', 'rgb(54, 162, 235)', 'rgb(255, 205, 86)' ], hoverOffset: 4 }] };8cutout40Sudut awal untuk menggambar busur. const data = { labels: [ 'Red', 'Blue', 'Yellow' ], datasets: [{ label: 'My First Dataset', data: [300, 50, 100], backgroundColor: [ 'rgb(255, 99, 132)', 'rgb(54, 162, 235)', 'rgb(255, 205, 86)' ], hoverOffset: 4 }] };4cutout4360 Sapu untuk memungkinkan busur menutupi. '50%'0'50%'1'50%'2Jika benar, bagan akan dianimasikan dengan animasi rotasi. Properti ini ada di objek '50%'_3. '50%'4'50%'1'50%'6Jika benar, akan menganimasikan penskalaan bagan dari tengah ke luarOpsi Bawaan
Kami juga dapat mengubah nilai default ini untuk setiap jenis Donat yang dibuat, objek ini tersedia di '50%'7. Bagan pai juga memiliki tiruan dari default ini yang tersedia untuk diubah pada '50%'8, dengan satu-satunya perbedaan adalah cutout disetel ke 0
Struktur data
Untuk diagram lingkaran, kumpulan data harus berisi larik titik data. Poin data harus berupa angka, Bagan. js akan menjumlahkan semua angka dan menghitung proporsi relatif masing-masing