Bagaimana Anda membuat bagan donat di html css?

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

Table of Contents Show

Properti Kumpulan Data
Penyelarasan Perbatasan
Radius Perbatasan
Opsi Konfigurasi
Opsi Bawaan
Struktur data
Bagaimana cara membuat bagan donat menggunakan HTML dan CSS?
Bagaimana Anda membuat bagan donat?
Bagaimana Anda membuat bagan donat 3D?
Bagaimana cara membuat diagram lingkaran HTML?
Bagaimana Anda mengubah diagram lingkaran menjadi diagram donat?

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

NameDescription

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
  }]
};

_4Penggantian per-set data untuk sapuan yang dicakup oleh 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
  }]
};

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
  }]
};

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
  }]
};

8Penggantian set data untuk sudut awal untuk menggambar busur dari

Styling

Gaya setiap busur dapat dikontrol dengan properti berikut

NameDescription

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
  }]
};

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 data

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

Penyelarasan Perbatasan

Nilai berikut didukung untuk

const config = {
  type: 'pie',
  data: data,
};

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

NameDescription

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
  }]
};

_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 luar

Opsi 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

Bagaimana cara membuat bagan donat menggunakan HTML dan CSS?

Tulis beberapa kode charting JS. .

Buat halaman HTML. Hal pertama yang kami lakukan adalah membuat halaman HTML dasar dengan elemen blok yang dirancang untuk menampung bagan donat. .

Sertakan file JavaScript. .

Tambahkan datanya. .

Tulis kode charting JS untuk chart donat kita

Bagaimana Anda membuat bagan donat?

Pilih data yang ingin Anda plot di bagan donat. Pada tab Insert, di grup Charts, klik Other Charts. Di bawah Donat, klik Donat. Klik area plot bagan donat .

Bagaimana Anda membuat bagan donat 3D?

Untuk membuat bagan Donat 3D, gunakan bagan apa saja. pie3d() konstruktor bagan dan metode innerRadius() untuk menyetel radius dalam . Radius adalah 0 secara default dan dapat diatur baik sebagai nilai atau persentase batas bagan.