Diagram lingkaran dinamis dalam html css

Question

Saya mendapat ide untuk melakukan hal semacam itu ketika saya menemukan diagram lingkaran SVG interaktif ini. Sementara kode SVG sangat ringkas (satu elemen

<style><div class="wrap">
  <input id="o2016" name="o" type="radio" checked="checked"/>
  <label for="o2016">2016</label>
  <input id="o2017" name="o" type="radio"/>
  <label for="o2017">2017</label>
  <input id="o2018" name="o" type="radio"/>
  <label for="o2018">2018</label>
  <div class="pie" aria-label="Value as pie chart. 20% for year 2016, 26% for year 2017, 29% for year 2018." role="graphics-document group"></div>
</div>

1. ), menggunakan goresan untuk membuat irisan diagram lingkaran bermasalah karena kami mengalami masalah rendering di Windows untuk Firefox dan Edge. Selain itu, di tahun 2018, kami dapat mencapai lebih banyak hal dengan JavaScript yang jauh lebih sedikit

Table of Contents Show

Meneruskan properti khusus ke CSS
Menampilkan nilai
Menghaluskan semuanya
Sentuhan yang mempercantik
Degradasi anggun
Menanggapi itu semua
Bonus. kemajuan radial
Bagaimana cara membuat diagram lingkaran dinamis dalam HTML?
Bagaimana Anda membuat diagram lingkaran dinamis?
Bagaimana cara membuat diagram lingkaran di CSS?
Mengapa diagram lingkaran 3D tidak direkomendasikan?

Saya berhasil mendapatkan hasil berikut menggunakan satu elemen HTML untuk bagan dan JavaScript yang sangat sedikit. Masa depan harus sepenuhnya menghilangkan kebutuhan akan JavaScript apa pun, tetapi lebih dari itu nanti

Hasil diagram lingkaran terakhir

Beberapa dari Anda mungkin ingat pembicaraan Lea Verou's Missing Slice — solusi saya didasarkan pada tekniknya. Artikel ini membedah cara kerjanya, menunjukkan apa yang dapat kita lakukan dalam hal degradasi yang anggun dan cara lain yang dapat digunakan teknik ini

HTML

Kami menggunakan Pug untuk menghasilkan HTML dari objek

<style><div class="wrap">
  <input id="o2016" name="o" type="radio" checked="checked"/>
  <label for="o2016">2016</label>
  <input id="o2017" name="o" type="radio"/>
  <label for="o2017">2017</label>
  <input id="o2018" name="o" type="radio"/>
  <label for="o2018">2018</label>
  <div class="pie" aria-label="Value as pie chart. 20% for year 2016, 26% for year 2017, 29% for year 2018." role="graphics-document group"></div>
</div>

2 yang berisi nilai persentase tanpa satuan selama tiga tahun terakhir

- var data = { 2016: 20, 2017: 26, 2018: 29 }

Kami membuat semua elemen kami berada di

<style><div class="wrap">
  <input id="o2016" name="o" type="radio" checked="checked"/>
  <label for="o2016">2016</label>
  <input id="o2017" name="o" type="radio"/>
  <label for="o2017">2017</label>
  <input id="o2018" name="o" type="radio"/>
  <label for="o2018">2018</label>
  <div class="pie" aria-label="Value as pie chart. 20% for year 2016, 26% for year 2017, 29% for year 2018." role="graphics-document group"></div>
</div>

3 elemen. Kemudian, kami mengulang objek

<style><div class="wrap">
  <input id="o2016" name="o" type="radio" checked="checked"/>
  <label for="o2016">2016</label>
  <input id="o2017" name="o" type="radio"/>
  <label for="o2017">2017</label>
  <input id="o2018" name="o" type="radio"/>
  <label for="o2018">2018</label>
  <div class="pie" aria-label="Value as pie chart. 20% for year 2016, 26% for year 2017, 29% for year 2018." role="graphics-document group"></div>
</div>

_2 kami dan, untuk setiap propertinya, kami membuat radio

<style><div class="wrap">
  <input id="o2016" name="o" type="radio" checked="checked"/>
  <label for="o2016">2016</label>
  <input id="o2017" name="o" type="radio"/>
  <label for="o2017">2017</label>
  <input id="o2018" name="o" type="radio"/>
  <label for="o2018">2018</label>
  <div class="pie" aria-label="Value as pie chart. 20% for year 2016, 26% for year 2017, 29% for year 2018." role="graphics-document group"></div>
</div>

5 dengan

<style><div class="wrap">
  <input id="o2016" name="o" type="radio" checked="checked"/>
  <label for="o2016">2016</label>
  <input id="o2017" name="o" type="radio"/>
  <label for="o2017">2017</label>
  <input id="o2018" name="o" type="radio"/>
  <label for="o2018">2018</label>
  <div class="pie" aria-label="Value as pie chart. 20% for year 2016, 26% for year 2017, 29% for year 2018." role="graphics-document group"></div>
</div>

6 yang sesuai. Setelah ini, kami menambahkan elemen

<style><div class="wrap">
  <input id="o2016" name="o" type="radio" checked="checked"/>
  <label for="o2016">2016</label>
  <input id="o2017" name="o" type="radio"/>
  <label for="o2017">2017</label>
  <input id="o2018" name="o" type="radio"/>
  <label for="o2018">2018</label>
  <div class="pie" aria-label="Value as pie chart. 20% for year 2016, 26% for year 2017, 29% for year 2018." role="graphics-document group"></div>
</div>

_7 ke dalam campuran

- var darr = [], val;

.wrap
  - for(var p in data) {
    - if(!val) val = data[p];
    input(id=`o${p}` name='o' type='radio' checked=val == data[p])
    label(for=`o${p}`) #{p}
    - darr.push(`${data[p]}% for year ${p}`)
  - }
  .pie(aria-label=`Value as pie chart. ${darr.join(', ')}.` 
       role='graphics-document group')

_

Kode Pug di atas dikompilasi ke HTML berikut

<style><div class="wrap">
  <input id="o2016" name="o" type="radio" checked="checked"/>
  <label for="o2016">2016</label>
  <input id="o2017" name="o" type="radio"/>
  <label for="o2017">2017</label>
  <input id="o2018" name="o" type="radio"/>
  <label for="o2018">2018</label>
  <div class="pie" aria-label="Value as pie chart. 20% for year 2016, 26% for year 2017, 29% for year 2018." role="graphics-document group"></div>
</div>

Perhatikan bahwa kami juga memastikan hanya radio pertama

<style><div class="wrap">
  <input id="o2016" name="o" type="radio" checked="checked"/>
  <label for="o2016">2016</label>
  <input id="o2017" name="o" type="radio"/>
  <label for="o2017">2017</label>
  <input id="o2018" name="o" type="radio"/>
  <label for="o2018">2018</label>
  <div class="pie" aria-label="Value as pie chart. 20% for year 2016, 26% for year 2017, 29% for year 2018." role="graphics-document group"></div>
</div>

5 yang dicentang

Meneruskan properti khusus ke CSS

Saya biasanya tidak suka menempatkan gaya dalam HTML tetapi, dalam kasus khusus ini, ini adalah cara yang sangat berguna untuk meneruskan nilai properti khusus ke CSS dan memastikan bahwa kita hanya perlu memperbarui sesuatu di satu tempat jika kita perlu mengubah salah satu dari . CSSnya tetap sama

Caranya adalah dengan menetapkan persentase tanpa unit

<style><div class="wrap">
  <input id="o2016" name="o" type="radio" checked="checked"/>
  <label for="o2016">2016</label>
  <input id="o2017" name="o" type="radio"/>
  <label for="o2017">2017</label>
  <input id="o2018" name="o" type="radio"/>
  <label for="o2018">2018</label>
  <div class="pie" aria-label="Value as pie chart. 20% for year 2016, 26% for year 2017, 29% for year 2018." role="graphics-document group"></div>
</div>

_9 pada elemen

<style><div class="wrap">
  <input id="o2016" name="o" type="radio" checked="checked"/>
  <label for="o2016">2016</label>
  <input id="o2017" name="o" type="radio"/>
  <label for="o2017">2017</label>
  <input id="o2018" name="o" type="radio"/>
  <label for="o2018">2018</label>
  <div class="pie" aria-label="Value as pie chart. 20% for year 2016, 26% for year 2017, 29% for year 2018." role="graphics-document group"></div>
</div>

7 untuk setiap radio

<style><div class="wrap">
  <input id="o2016" name="o" type="radio" checked="checked"/>
  <label for="o2016">2016</label>
  <input id="o2017" name="o" type="radio"/>
  <label for="o2017">2017</label>
  <input id="o2018" name="o" type="radio"/>
  <label for="o2018">2018</label>
  <div class="pie" aria-label="Value as pie chart. 20% for year 2016, 26% for year 2017, 29% for year 2018." role="graphics-document group"></div>
</div>

5 yang mungkin diperiksa

style
  - for(var p in data) {
    | #o#{p}:checked ~ .pie { --p: #{data[p]} }
  - }

Kami menggunakan persentase ini untuk

style
  - for(var p in data) {
    | #o#{p}:checked ~ .pie { --p: #{data[p]} }
  - }

_2 pada elemen

<style><div class="wrap">
  <input id="o2016" name="o" type="radio" checked="checked"/>
  <label for="o2016">2016</label>
  <input id="o2017" name="o" type="radio"/>
  <label for="o2017">2017</label>
  <input id="o2018" name="o" type="radio"/>
  <label for="o2018">2018</label>
  <div class="pie" aria-label="Value as pie chart. 20% for year 2016, 26% for year 2017, 29% for year 2018." role="graphics-document group"></div>
</div>

7 setelah memastikan tidak satu pun dari dimensinya (termasuk

style
  - for(var p in data) {
    | #o#{p}:checked ~ .pie { --p: #{data[p]} }
  - }

4 dan

style
  - for(var p in data) {
    | #o#{p}:checked ~ .pie { --p: #{data[p]} }
  - }

5) adalah

style
  - for(var p in data) {
    | #o#{p}:checked ~ .pie { --p: #{data[p]} }
  - }

6

$d: 20rem;

.wrap { width: $d; }

.pie {
  padding: 50%;
  background: conic-gradient(#ab3e5b calc(var(--p)*1%), #ef746f 0%);
}

Perhatikan bahwa ini memerlukan dukungan asli

style
  - for(var p in data) {
    | #o#{p}:checked ~ .pie { --p: #{data[p]} }
  - }

_2 karena polyfill tidak berfungsi dengan variabel CSS. Saat ini, ini membatasi dukungan untuk browser Blink dengan bendera fitur Platform Web Eksperimental diaktifkan, meskipun semuanya akan menjadi lebih baik

Bendera fitur Platform Web Eksperimental diaktifkan di Chrome

Memperbarui. Chrome 69+ sekarang mendukung

style
  - for(var p in data) {
    | #o#{p}:checked ~ .pie { --p: #{data[p]} }
  - }

2 secara native tanpa bendera juga

Kami sekarang memiliki kerangka kerja demo kami—memilih tahun yang berbeda melalui tombol radio menghasilkan

style
  - for(var p in data) {
    | #o#{p}:checked ~ .pie { --p: #{data[p]} }
  - }

2 yang berbeda

Fungsionalitas dasar yang kami kejar (demo langsung, hanya browser Blink)

Menampilkan nilai

Langkah selanjutnya adalah benar-benar menampilkan nilai saat ini dan kami melakukannya melalui elemen semu. Sayangnya, variabel CSS bernilai angka tidak dapat digunakan untuk nilai properti

$d: 20rem;

.wrap { width: $d; }

.pie {
  padding: 50%;
  background: conic-gradient(#ab3e5b calc(var(--p)*1%), #ef746f 0%);
}

0, jadi kami menyiasatinya dengan menggunakan peretasan

$d: 20rem;

.wrap { width: $d; }

.pie {
  padding: 50%;
  background: conic-gradient(#ab3e5b calc(var(--p)*1%), #ef746f 0%);
}

1

.pie:after {
  counter-reset: p var(--p);
  content: counter(p) '%';
}

Kami juga telah men-tweak properti

$d: 20rem;

.wrap { width: $d; }

.pie {
  padding: 50%;
  background: conic-gradient(#ab3e5b calc(var(--p)*1%), #ef746f 0%);
}

_2 dan

$d: 20rem;

.wrap { width: $d; }

.pie {
  padding: 50%;
  background: conic-gradient(#ab3e5b calc(var(--p)*1%), #ef746f 0%);
}

3 sehingga elemen pseudo kami sedikit lebih terlihat

Menampilkan nilai pada grafik (demo langsung, hanya browser Blink)

Menghaluskan semuanya

Kami tidak ingin perubahan mendadak antar nilai, jadi kami memuluskan semuanya dengan bantuan CSS

$d: 20rem;

.wrap { width: $d; }

.pie {
  padding: 50%;
  background: conic-gradient(#ab3e5b calc(var(--p)*1%), #ef746f 0%);
}

4. Sebelum kita dapat mentransisikan atau menganimasikan variabel

<style><div class="wrap">
  <input id="o2016" name="o" type="radio" checked="checked"/>
  <label for="o2016">2016</label>
  <input id="o2017" name="o" type="radio"/>
  <label for="o2017">2017</label>
  <input id="o2018" name="o" type="radio"/>
  <label for="o2018">2018</label>
  <div class="pie" aria-label="Value as pie chart. 20% for year 2016, 26% for year 2017, 29% for year 2018." role="graphics-document group"></div>
</div>

9, kita perlu mendaftarkannya di JavaScript

CSS.registerProperty({
  name: '--p', 
  syntax: '<integer>',
  initialValue: 0, 
  inherits: true
});

Perhatikan bahwa menggunakan

$d: 20rem;

.wrap { width: $d; }

.pie {
  padding: 50%;
  background: conic-gradient(#ab3e5b calc(var(--p)*1%), #ef746f 0%);
}

6 alih-alih

$d: 20rem;

.wrap { width: $d; }

.pie {
  padding: 50%;
  background: conic-gradient(#ab3e5b calc(var(--p)*1%), #ef746f 0%);
}

7 menyebabkan nilai yang ditampilkan menjadi

style
  - for(var p in data) {
    | #o#{p}:checked ~ .pie { --p: #{data[p]} }
  - }

6 selama

$d: 20rem;

.wrap { width: $d; }

.pie {
  padding: 50%;
  background: conic-gradient(#ab3e5b calc(var(--p)*1%), #ef746f 0%);
}

4 karena penghitung kami membutuhkan bilangan bulat. Terima kasih kepada Lea Verou karena telah membantu saya mencari tahu

Perhatikan juga bahwa pengaturan

.pie:after {
  counter-reset: p var(--p);
  content: counter(p) '%';
}

0 secara eksplisit adalah wajib. Ini tidak terjadi sampai saat ini

Ini semua JavaScript yang kami butuhkan untuk demo ini dan, di masa mendatang, kami bahkan tidak perlu sebanyak ini karena kami akan dapat mendaftarkan properti khusus dari CSS

Dengan itu, kita dapat menambahkan

$d: 20rem;

.wrap { width: $d; }

.pie {
  padding: 50%;
  background: conic-gradient(#ab3e5b calc(var(--p)*1%), #ef746f 0%);
}

4 pada elemen

<style><div class="wrap">
  <input id="o2016" name="o" type="radio" checked="checked"/>
  <label for="o2016">2016</label>
  <input id="o2017" name="o" type="radio"/>
  <label for="o2017">2017</label>
  <input id="o2018" name="o" type="radio"/>
  <label for="o2018">2018</label>
  <div class="pie" aria-label="Value as pie chart. 20% for year 2016, 26% for year 2017, 29% for year 2018." role="graphics-document group"></div>
</div>

7 kita

.pie {
  /* same styles as before */
  transition: --p .5s;
}

Dan itu saja untuk fungsinya. Semua dilakukan dengan satu elemen, satu variabel khusus, dan taburan sihir Houdini

Bagan pai interaktif (demo langsung, Blink browser dengan bendera saja)

Sentuhan yang mempercantik

Meskipun demo kami berfungsi, tampilannya sama sekali tidak cantik untuk saat ini. Jadi, mari kita urus itu selagi kita melakukannya

Membuat pai… pai

Sejak kehadiran

.pie:after {
  counter-reset: p var(--p);
  content: counter(p) '%';
}

_3 telah meningkatkan

.pie:after {
  counter-reset: p var(--p);
  content: counter(p) '%';
}

4 dari

<style><div class="wrap">
  <input id="o2016" name="o" type="radio" checked="checked"/>
  <label for="o2016">2016</label>
  <input id="o2017" name="o" type="radio"/>
  <label for="o2017">2017</label>
  <input id="o2018" name="o" type="radio"/>
  <label for="o2018">2018</label>
  <div class="pie" aria-label="Value as pie chart. 20% for year 2016, 26% for year 2017, 29% for year 2018." role="graphics-document group"></div>
</div>

7 induknya, kami benar-benar memposisikannya. Dan karena kita ingin elemen

<style><div class="wrap">
  <input id="o2016" name="o" type="radio" checked="checked"/>
  <label for="o2016">2016</label>
  <input id="o2017" name="o" type="radio"/>
  <label for="o2017">2017</label>
  <input id="o2018" name="o" type="radio"/>
  <label for="o2018">2018</label>
  <div class="pie" aria-label="Value as pie chart. 20% for year 2016, 26% for year 2017, 29% for year 2018." role="graphics-document group"></div>
</div>

7 kita terlihat lebih seperti pai yang sebenarnya, kita membulatkannya dengan

.pie:after {
  counter-reset: p var(--p);
  content: counter(p) '%';
}

7

Mengumpulkan pai kami (demo langsung, hanya browser Blink, transisi memerlukan tanda)

Kami juga ingin menampilkan nilai persentase di tengah potongan pai gelap

Untuk melakukan ini, pertama-tama kita memposisikannya mati di tengah elemen

<style><div class="wrap">
  <input id="o2016" name="o" type="radio" checked="checked"/>
  <label for="o2016">2016</label>
  <input id="o2017" name="o" type="radio"/>
  <label for="o2017">2017</label>
  <input id="o2018" name="o" type="radio"/>
  <label for="o2018">2018</label>
  <div class="pie" aria-label="Value as pie chart. 20% for year 2016, 26% for year 2017, 29% for year 2018." role="graphics-document group"></div>
</div>

7. Secara default, pseudo-elemen

.pie:after {
  counter-reset: p var(--p);
  content: counter(p) '%';
}

_3 ditampilkan setelah konten induknya. Karena

<style><div class="wrap">
  <input id="o2016" name="o" type="radio" checked="checked"/>
  <label for="o2016">2016</label>
  <input id="o2017" name="o" type="radio"/>
  <label for="o2017">2017</label>
  <input id="o2018" name="o" type="radio"/>
  <label for="o2018">2018</label>
  <div class="pie" aria-label="Value as pie chart. 20% for year 2016, 26% for year 2017, 29% for year 2018." role="graphics-document group"></div>
</div>

7 tidak memiliki konten dalam kasus ini, pojok kiri atas elemen semu

.pie:after {
  counter-reset: p var(--p);
  content: counter(p) '%';
}

3 berada di pojok kiri atas

CSS.registerProperty({
  name: '--p', 
  syntax: '<integer>',
  initialValue: 0, 
  inherits: true
});

2 induk. Di sini,

CSS.registerProperty({
  name: '--p', 
  syntax: '<integer>',
  initialValue: 0, 
  inherits: true
});

2 adalah

CSS.registerProperty({
  name: '--p', 
  syntax: '<integer>',
  initialValue: 0, 
  inherits: true
});

4 kotak di tengah

CSS.registerProperty({
  name: '--p', 
  syntax: '<integer>',
  initialValue: 0, 
  inherits: true
});

5. Ingatlah bahwa kita telah menyetel

style
  - for(var p in data) {
    | #o#{p}:checked ~ .pie { --p: #{data[p]} }
  - }

_5 dari

<style><div class="wrap">
  <input id="o2016" name="o" type="radio" checked="checked"/>
  <label for="o2016">2016</label>
  <input id="o2017" name="o" type="radio"/>
  <label for="o2017">2017</label>
  <input id="o2018" name="o" type="radio"/>
  <label for="o2018">2018</label>
  <div class="pie" aria-label="Value as pie chart. 20% for year 2016, 26% for year 2017, 29% for year 2018." role="graphics-document group"></div>
</div>

7 menjadi

CSS.registerProperty({
  name: '--p', 
  syntax: '<integer>',
  initialValue: 0, 
  inherits: true
});

8—nilai yang relatif terhadap pembungkus

CSS.registerProperty({
  name: '--p', 
  syntax: '<integer>',
  initialValue: 0, 
  inherits: true
});

9 untuk arah horizontal dan vertikal

Ini berarti sudut kiri atas

.pie:after {
  counter-reset: p var(--p);
  content: counter(p) '%';
}

_3 berada di tengah induknya, jadi

.pie {
  /* same styles as before */
  transition: --p .5s;
}

1 di atasnya menggesernya ke kiri setengah miliknya sendiri ________31______9 dan naik setengah miliknya

.pie:after {
  counter-reset: p var(--p);
  content: counter(p) '%';
}

4, membuat titik tengahnya bertepatan dengan titik tengahnya

Ingat bahwa terjemahan bernilai

.pie {
  /* same styles as before */
  transition: --p .5s;
}

5 adalah untuk dimensi elemen yang diterapkan di sepanjang sumbu yang sesuai. Dengan kata lain, translasi bernilai

.pie {
  /* same styles as before */
  transition: --p .5s;
}

5 sepanjang sumbu x relatif terhadap elemen

CSS.registerProperty({
  name: '--p', 
  syntax: '<integer>',
  initialValue: 0, 
  inherits: true
});

9, translasi bernilai

.pie {
  /* same styles as before */
  transition: --p .5s;
}

5 sepanjang sumbu y relatif terhadap

.pie:after {
  counter-reset: p var(--p);
  content: counter(p) '%';
}

4 dan translasi bernilai

.pie {
  /* same styles as before */
  transition: --p .5s;
}

5 sepanjang sumbu z relatif terhadap

Memposisikan label nilai di tengah pai (demo langsung, hanya browser Blink, transisi membutuhkan bendera)

Selanjutnya, kita

translate(-50%, -50%) rotate(calc(.5*var(--p)/100*1turn - 90deg)) translate(.25*$d);

3 nilai sedemikian rupa sehingga separuh positif sumbu x-nya membagi irisan gelap menjadi dua bagian yang sama dan kemudian

translate(-50%, -50%) rotate(calc(.5*var(--p)/100*1turn - 90deg)) translate(.25*$d);

4 dengan setengah radius pai di sepanjang sumbu x yang sekarang diputar ini

Lihat Pena oleh thebabydino (@thebabydino) di CodePen

Yang perlu kita ketahui adalah berapa banyak untuk memutar elemen semu

.pie:after {
  counter-reset: p var(--p);
  content: counter(p) '%';
}

3 sehingga sumbu x-nya membagi irisan gelap menjadi dua bagian yang sama. Mari kita uraikan itu

Awalnya, sumbu x adalah horizontal, mengarah ke kanan, jadi untuk memilikinya ke arah yang diinginkan, pertama-tama kita perlu memutarnya sehingga mengarah ke atas dan berjalan di sepanjang tepi awal irisan. Maka perlu memutar searah jarum jam setengah irisan

Agar sumbu mengarah ke atas, kita perlu memutarnya sebesar

translate(-50%, -50%) rotate(calc(.5*var(--p)/100*1turn - 90deg)) translate(.25*$d);

6. Tanda minus disebabkan oleh fakta bahwa nilai positif mengikuti arah searah jarum jam dan kita menuju ke arah sebaliknya

Lihat Pena oleh thebabydino (@thebabydino) di CodePen

Selanjutnya, kita perlu memutarnya menjadi setengah irisan

Lihat Pena oleh thebabydino (@thebabydino) di CodePen

Tapi berapa setengah potong?

Nah, kita sudah tahu berapa persentase pai yang diwakili oleh irisan ini. itu milik adat kami,

<style><div class="wrap">
  <input id="o2016" name="o" type="radio" checked="checked"/>
  <label for="o2016">2016</label>
  <input id="o2017" name="o" type="radio"/>
  <label for="o2017">2017</label>
  <input id="o2018" name="o" type="radio"/>
  <label for="o2018">2018</label>
  <div class="pie" aria-label="Value as pie chart. 20% for year 2016, 26% for year 2017, 29% for year 2018." role="graphics-document group"></div>
</div>

_9. Jika kita membagi nilai itu dengan

translate(-50%, -50%) rotate(calc(.5*var(--p)/100*1turn - 90deg)) translate(.25*$d);

_8 lalu mengalikannya dengan

translate(-50%, -50%) rotate(calc(.5*var(--p)/100*1turn - 90deg)) translate(.25*$d);

9 (atau

--a: calc(.5*var(--p)/100*1turn - 90deg);
transform: 
  translate(-50%, -50%) 
  rotate(var(--a)) 
  translate(.25*$d) 
  rotate(calc(-1*var(--a)));

0, tidak masalah unit apa yang digunakan), kita mendapatkan sudut pusat irisan gelap kita

Setelah rotasi

translate(-50%, -50%) rotate(calc(.5*var(--p)/100*1turn - 90deg)) translate(.25*$d);

6, kita perlu memutar

.pie:after {
  counter-reset: p var(--p);
  content: counter(p) '%';
}

3 setengah sudut pusat ini searah jarum jam (positif)

Ini berarti kami menerapkan rantai

--a: calc(.5*var(--p)/100*1turn - 90deg);
transform: 
  translate(-50%, -50%) 
  rotate(var(--a)) 
  translate(.25*$d) 
  rotate(calc(-1*var(--a)));

_3 berikut

translate(-50%, -50%) rotate(calc(.5*var(--p)/100*1turn - 90deg)) translate(.25*$d);

Terjemahan terakhir adalah seperempat dari

--a: calc(.5*var(--p)/100*1turn - 90deg);
transform: 
  translate(-50%, -50%) 
  rotate(var(--a)) 
  translate(.25*$d) 
  rotate(calc(-1*var(--a)));

4, yang merupakan pembungkus

CSS.registerProperty({
  name: '--p', 
  syntax: '<integer>',
  initialValue: 0, 
  inherits: true
});

9 dan memberi kita diameter

<style><div class="wrap">
  <input id="o2016" name="o" type="radio" checked="checked"/>
  <label for="o2016">2016</label>
  <input id="o2017" name="o" type="radio"/>
  <label for="o2017">2017</label>
  <input id="o2018" name="o" type="radio"/>
  <label for="o2018">2018</label>
  <div class="pie" aria-label="Value as pie chart. 20% for year 2016, 26% for year 2017, 29% for year 2018." role="graphics-document group"></div>
</div>

7 juga. (Karena

CSS.registerProperty({
  name: '--p', 
  syntax: '<integer>',
  initialValue: 0, 
  inherits: true
});

2 dari

<style><div class="wrap">
  <input id="o2016" name="o" type="radio" checked="checked"/>
  <label for="o2016">2016</label>
  <input id="o2017" name="o" type="radio"/>
  <label for="o2017">2017</label>
  <input id="o2018" name="o" type="radio"/>
  <label for="o2018">2018</label>
  <div class="pie" aria-label="Value as pie chart. 20% for year 2016, 26% for year 2017, 29% for year 2018." role="graphics-document group"></div>
</div>

7 adalah

CSS.registerProperty({
  name: '--p', 
  syntax: '<integer>',
  initialValue: 0, 
  inherits: true
});

4 kotak, tidak ada

style
  - for(var p in data) {
    | #o#{p}:checked ~ .pie { --p: #{data[p]} }
  - }

4 dan kedua kiri dan kanannya

style
  - for(var p in data) {
    | #o#{p}:checked ~ .pie { --p: #{data[p]} }
  - }

5 adalah

CSS.registerProperty({
  name: '--p', 
  syntax: '<integer>',
  initialValue: 0, 
  inherits: true
});

8 dari induk pembungkusnya

CSS.registerProperty({
  name: '--p', 
  syntax: '<integer>',
  initialValue: 0, 
  inherits: true
});

9. ) Jari-jari

<style><div class="wrap">
  <input id="o2016" name="o" type="radio" checked="checked"/>
  <label for="o2016">2016</label>
  <input id="o2017" name="o" type="radio"/>
  <label for="o2017">2017</label>
  <input id="o2018" name="o" type="radio"/>
  <label for="o2018">2018</label>
  <div class="pie" aria-label="Value as pie chart. 20% for year 2016, 26% for year 2017, 29% for year 2018." role="graphics-document group"></div>
</div>

_7 adalah setengah dari diameternya, artinya setengah jari-jari adalah seperempat dari diameter (

--a: calc(.5*var(--p)/100*1turn - 90deg);
transform: 
  translate(-50%, -50%) 
  rotate(var(--a)) 
  translate(.25*$d) 
  rotate(calc(-1*var(--a)));

4)

Sekarang label nilai diposisikan di tempat yang kita inginkan

Memposisikan label nilai di tengah irisan (demo langsung, browser Blink saja, transisi memerlukan bendera)

Namun, masih ada satu masalah. kami tidak ingin itu diputar, karena itu bisa terlihat sangat canggung dan menekuk leher pada sudut tertentu. Untuk memperbaikinya, kami mengembalikan rotasi di bagian akhir. Untuk mempermudah diri kita sendiri, kita menyimpan sudut rotasi dalam variabel CSS yang kita sebut

- var darr = [], val;

.wrap
  - for(var p in data) {
    - if(!val) val = data[p];
    input(id=`o${p}` name='o' type='radio' checked=val == data[p])
    label(for=`o${p}`) #{p}
    - darr.push(`${data[p]}% for year ${p}`)
  - }
  .pie(aria-label=`Value as pie chart. ${darr.join(', ')}.` 
       role='graphics-document group')

06

--a: calc(.5*var(--p)/100*1turn - 90deg);
transform: 
  translate(-50%, -50%) 
  rotate(var(--a)) 
  translate(.25*$d) 
  rotate(calc(-1*var(--a)));

Jauh lebih baik

Memposisikan label nilai di tengah irisan, sekarang horizontal (demo langsung, browser Blink saja, transisi memerlukan tanda)

Tata letak

Kami ingin memiliki seluruh perakitan di tengah layar, jadi kami menyelesaikan ini dengan trik jaringan kecil yang rapi

- var darr = [], val;

.wrap
  - for(var p in data) {
    - if(!val) val = data[p];
    input(id=`o${p}` name='o' type='radio' checked=val == data[p])
    label(for=`o${p}`) #{p}
    - darr.push(`${data[p]}% for year ${p}`)
  - }
  .pie(aria-label=`Value as pie chart. ${darr.join(', ')}.` 
       role='graphics-document group')

_0

Baiklah, ini menempatkan seluruh elemen

<style><div class="wrap">
  <input id="o2016" name="o" type="radio" checked="checked"/>
  <label for="o2016">2016</label>
  <input id="o2017" name="o" type="radio"/>
  <label for="o2017">2017</label>
  <input id="o2018" name="o" type="radio"/>
  <label for="o2018">2018</label>
  <div class="pie" aria-label="Value as pie chart. 20% for year 2016, 26% for year 2017, 29% for year 2018." role="graphics-document group"></div>
</div>

3 di tengah

Memposisikan seluruh rakitan di tengah (demo langsung, hanya browser Blink, transisi memerlukan bendera)

Langkah selanjutnya adalah menempatkan diagram lingkaran di atas tombol radio. Kami melakukan ini dengan tata letak flexbox pada elemen

<style><div class="wrap">
  <input id="o2016" name="o" type="radio" checked="checked"/>
  <label for="o2016">2016</label>
  <input id="o2017" name="o" type="radio"/>
  <label for="o2017">2017</label>
  <input id="o2018" name="o" type="radio"/>
  <label for="o2018">2018</label>
  <div class="pie" aria-label="Value as pie chart. 20% for year 2016, 26% for year 2017, 29% for year 2018." role="graphics-document group"></div>
</div>

3

- var darr = [], val;

.wrap
  - for(var p in data) {
    - if(!val) val = data[p];
    input(id=`o${p}` name='o' type='radio' checked=val == data[p])
    label(for=`o${p}`) #{p}
    - darr.push(`${data[p]}% for year ${p}`)
  - }
  .pie(aria-label=`Value as pie chart. ${darr.join(', ')}.` 
       role='graphics-document group')

1

Menempatkan diagram lingkaran di atas tombol radio (demo langsung, hanya browser Blink, transisi memerlukan tanda).

Styling tombol radio

…atau lebih tepatnya, kami menata label tombol radio karena hal pertama yang kami lakukan adalah menyembunyikan input radio

- var darr = [], val;

.wrap
  - for(var p in data) {
    - if(!val) val = data[p];
    input(id=`o${p}` name='o' type='radio' checked=val == data[p])
    label(for=`o${p}`) #{p}
    - darr.push(`${data[p]}% for year ${p}`)
  - }
  .pie(aria-label=`Value as pie chart. ${darr.join(', ')}.` 
       role='graphics-document group')

2

Setelah menyembunyikan tombol radio (demo langsung, browser Blink saja, transisi memerlukan tanda).

Karena hal ini membuat kita memiliki beberapa label yang sangat jelek yang sangat sulit dibedakan satu sama lain, mari kita beri masing-masing beberapa

- var darr = [], val;

.wrap
  - for(var p in data) {
    - if(!val) val = data[p];
    input(id=`o${p}` name='o' type='radio' checked=val == data[p])
    label(for=`o${p}`) #{p}
    - darr.push(`${data[p]}% for year ${p}`)
  - }
  .pie(aria-label=`Value as pie chart. ${darr.join(', ')}.` 
       role='graphics-document group')

09 dan

style
  - for(var p in data) {
    | #o#{p}:checked ~ .pie { --p: #{data[p]} }
  - }

5 sehingga mereka tidak terlihat begitu berdesakan, ditambah latar belakang sehingga area yang dapat diklik disorot dengan jelas. Kami bahkan dapat menambahkan bayangan kotak dan teks untuk beberapa efek 3D. Dan, tentu saja, kita dapat membuat kasus terpisah ketika input yang sesuai adalah

- var darr = [], val;

.wrap
  - for(var p in data) {
    - if(!val) val = data[p];
    input(id=`o${p}` name='o' type='radio' checked=val == data[p])
    label(for=`o${p}`) #{p}
    - darr.push(`${data[p]}% for year ${p}`)
  - }
  .pie(aria-label=`Value as pie chart. ${darr.join(', ')}.` 
       role='graphics-document group')

11

- var darr = [], val;

.wrap
  - for(var p in data) {
    - if(!val) val = data[p];
    input(id=`o${p}` name='o' type='radio' checked=val == data[p])
    label(for=`o${p}`) #{p}
    - darr.push(`${data[p]}% for year ${p}`)
  - }
  .pie(aria-label=`Value as pie chart. ${darr.join(', ')}.` 
       role='graphics-document group')

_3

Kami juga telah meledakkan

$d: 20rem;

.wrap { width: $d; }

.pie {
  padding: 50%;
  background: conic-gradient(#ab3e5b calc(var(--p)*1%), #ef746f 0%);
}

_3 sedikit dan menetapkan

- var darr = [], val;

.wrap
  - for(var p in data) {
    - if(!val) val = data[p];
    input(id=`o${p}` name='o' type='radio' checked=val == data[p])
    label(for=`o${p}`) #{p}
    - darr.push(`${data[p]}% for year ${p}`)
  - }
  .pie(aria-label=`Value as pie chart. ${darr.join(', ')}.` 
       role='graphics-document group')

13 untuk menghaluskan sudut

Setelah menata label tombol radio (demo langsung, browser Blink saja, transisi memerlukan bendera)

Sentuhan terakhir yang mempercantik

Mari kita atur

- var darr = [], val;

.wrap
  - for(var p in data) {
    - if(!val) val = data[p];
    input(id=`o${p}` name='o' type='radio' checked=val == data[p])
    label(for=`o${p}`) #{p}
    - darr.push(`${data[p]}% for year ${p}`)
  - }
  .pie(aria-label=`Value as pie chart. ${darr.join(', ')}.` 
       role='graphics-document group')

_14 pada

- var darr = [], val;

.wrap
  - for(var p in data) {
    - if(!val) val = data[p];
    input(id=`o${p}` name='o' type='radio' checked=val == data[p])
    label(for=`o${p}`) #{p}
    - darr.push(`${data[p]}% for year ${p}`)
  - }
  .pie(aria-label=`Value as pie chart. ${darr.join(', ')}.` 
       role='graphics-document group')

15, atur

- var darr = [], val;

.wrap
  - for(var p in data) {
    - if(!val) val = data[p];
    input(id=`o${p}` name='o' type='radio' checked=val == data[p])
    label(for=`o${p}`) #{p}
    - darr.push(`${data[p]}% for year ${p}`)
  - }
  .pie(aria-label=`Value as pie chart. ${darr.join(', ')}.` 
       role='graphics-document group')

16 dari semuanya dan tambahkan

$d: 20rem;

.wrap { width: $d; }

.pie {
  padding: 50%;
  background: conic-gradient(#ab3e5b calc(var(--p)*1%), #ef746f 0%);
}

4 untuk label radio

Hasil diagram lingkaran terakhir (demo langsung, browser Blink saja, transisi memerlukan tanda)

Degradasi anggun

Meskipun demo kami sekarang terlihat bagus di browser Blink, demo ini terlihat buruk di semua browser lain… dan itu adalah sebagian besar browser

Pertama, mari tempatkan pekerjaan kita di dalam blok

- var darr = [], val;

.wrap
  - for(var p in data) {
    - if(!val) val = data[p];
    input(id=`o${p}` name='o' type='radio' checked=val == data[p])
    label(for=`o${p}`) #{p}
    - darr.push(`${data[p]}% for year ${p}`)
  - }
  .pie(aria-label=`Value as pie chart. ${darr.join(', ')}.` 
       role='graphics-document group')

18 yang memeriksa dukungan asli

style
  - for(var p in data) {
    | #o#{p}:checked ~ .pie { --p: #{data[p]} }
  - }

2 sehingga browser yang mendukungnya akan merender diagram lingkaran. Ini termasuk

style
  - for(var p in data) {
    | #o#{p}:checked ~ .pie { --p: #{data[p]} }
  - }

2 kami,

style
  - for(var p in data) {
    | #o#{p}:checked ~ .pie { --p: #{data[p]} }
  - }

5 yang memberikan dimensi horizontal dan vertikal pai yang sama,

- var darr = [], val;

.wrap
  - for(var p in data) {
    - if(!val) val = data[p];
    input(id=`o${p}` name='o' type='radio' checked=val == data[p])
    label(for=`o${p}`) #{p}
    - darr.push(`${data[p]}% for year ${p}`)
  - }
  .pie(aria-label=`Value as pie chart. ${darr.join(', ')}.` 
       role='graphics-document group')

13 yang membuat lingkaran pai, dan rantai

--a: calc(.5*var(--p)/100*1turn - 90deg);
transform: 
  translate(-50%, -50%) 
  rotate(var(--a)) 
  translate(.25*$d) 
  rotate(calc(-1*var(--a)));

3 yang menempatkan label nilai di tengah potongan pai

- var darr = [], val;

.wrap
  - for(var p in data) {
    - if(!val) val = data[p];
    input(id=`o${p}` name='o' type='radio' checked=val == data[p])
    label(for=`o${p}`) #{p}
    - darr.push(`${data[p]}% for year ${p}`)
  - }
  .pie(aria-label=`Value as pie chart. ${darr.join(', ')}.` 
       role='graphics-document group')

_4

Sekarang, mari buat bagan batang sebagai fallback untuk semua browser lain menggunakan

- var darr = [], val;

.wrap
  - for(var p in data) {
    - if(!val) val = data[p];
    input(id=`o${p}` name='o' type='radio' checked=val == data[p])
    label(for=`o${p}`) #{p}
    - darr.push(`${data[p]}% for year ${p}`)
  - }
  .pie(aria-label=`Value as pie chart. ${darr.join(', ')}.` 
       role='graphics-document group')

24. Kami ingin batang kami membentang melintasi elemen

<style><div class="wrap">
  <input id="o2016" name="o" type="radio" checked="checked"/>
  <label for="o2016">2016</label>
  <input id="o2017" name="o" type="radio"/>
  <label for="o2017">2017</label>
  <input id="o2018" name="o" type="radio"/>
  <label for="o2018">2018</label>
  <div class="pie" aria-label="Value as pie chart. 20% for year 2016, 26% for year 2017, 29% for year 2018." role="graphics-document group"></div>
</div>

3 sehingga horizontal

style
  - for(var p in data) {
    | #o#{p}:checked ~ .pie { --p: #{data[p]} }
  - }

5 masih

CSS.registerProperty({
  name: '--p', 
  syntax: '<integer>',
  initialValue: 0, 
  inherits: true
});

8, tetapi secara vertikal sebagai batang sempit. Kami masih ingin bagan cukup tinggi agar sesuai dengan label nilai. Ini berarti kita menggunakan vertikal yang lebih kecil

style
  - for(var p in data) {
    | #o#{p}:checked ~ .pie { --p: #{data[p]} }
  - }

5. Kami juga mengurangi

- var darr = [], val;

.wrap
  - for(var p in data) {
    - if(!val) val = data[p];
    input(id=`o${p}` name='o' type='radio' checked=val == data[p])
    label(for=`o${p}`) #{p}
    - darr.push(`${data[p]}% for year ${p}`)
  - }
  .pie(aria-label=`Value as pie chart. ${darr.join(', ')}.` 
       role='graphics-document group')

13, karena

CSS.registerProperty({
  name: '--p', 
  syntax: '<integer>',
  initialValue: 0, 
  inherits: true
});

8 akan memberi kita elips dan yang kita butuhkan adalah persegi panjang dengan sudut agak membulat

Fallback juga menggantikan

style
  - for(var p in data) {
    | #o#{p}:checked ~ .pie { --p: #{data[p]} }
  - }

_2 dengan kiri ke kanan

- var darr = [], val;

.wrap
  - for(var p in data) {
    - if(!val) val = data[p];
    input(id=`o${p}` name='o' type='radio' checked=val == data[p])
    label(for=`o${p}`) #{p}
    - darr.push(`${data[p]}% for year ${p}`)
  - }
  .pie(aria-label=`Value as pie chart. ${darr.join(', ')}.` 
       role='graphics-document group')

24. Karena

- var darr = [], val;

.wrap
  - for(var p in data) {
    - if(!val) val = data[p];
    input(id=`o${p}` name='o' type='radio' checked=val == data[p])
    label(for=`o${p}`) #{p}
    - darr.push(`${data[p]}% for year ${p}`)
  - }
  .pie(aria-label=`Value as pie chart. ${darr.join(', ')}.` 
       role='graphics-document group')

_24 membuat fallback bar chart dan

style
  - for(var p in data) {
    | #o#{p}:checked ~ .pie { --p: #{data[p]} }
  - }

2 membuat pie chart menggunakan stop list yang sama, kita dapat menyimpannya dalam variabel CSS (

- var darr = [], val;

.wrap
  - for(var p in data) {
    - if(!val) val = data[p];
    input(id=`o${p}` name='o' type='radio' checked=val == data[p])
    label(for=`o${p}`) #{p}
    - darr.push(`${data[p]}% for year ${p}`)
  - }
  .pie(aria-label=`Value as pie chart. ${darr.join(', ')}.` 
       role='graphics-document group')

35) sehingga kita bahkan tidak mengulanginya di CSS terkompilasi

Terakhir, kami ingin label nilai di tengah bilah untuk fallback karena kami tidak memiliki irisan pai lagi. Ini berarti kami menyimpan semua pemosisian pasca-pemusatan ke dalam variabel CSS (

- var darr = [], val;

.wrap
  - for(var p in data) {
    - if(!val) val = data[p];
    input(id=`o${p}` name='o' type='radio' checked=val == data[p])
    label(for=`o${p}`) #{p}
    - darr.push(`${data[p]}% for year ${p}`)
  - }
  .pie(aria-label=`Value as pie chart. ${darr.join(', ')}.` 
       role='graphics-document group')

36) yang nilainya tidak ada dalam kasus dukungan no

style
  - for(var p in data) {
    | #o#{p}:checked ~ .pie { --p: #{data[p]} }
  - }

2 dan rantai

--a: calc(.5*var(--p)/100*1turn - 90deg);
transform: 
  translate(-50%, -50%) 
  rotate(var(--a)) 
  translate(.25*$d) 
  rotate(calc(-1*var(--a)));

3 sebelumnya jika tidak

- var darr = [], val;

.wrap
  - for(var p in data) {
    - if(!val) val = data[p];
    input(id=`o${p}` name='o' type='radio' checked=val == data[p])
    label(for=`o${p}`) #{p}
    - darr.push(`${data[p]}% for year ${p}`)
  - }
  .pie(aria-label=`Value as pie chart. ${darr.join(', ')}.` 
       role='graphics-document group')

_5

Kami juga beralih menggunakan tata letak flexbox pada

- var darr = [], val;

.wrap
  - for(var p in data) {
    - if(!val) val = data[p];
    input(id=`o${p}` name='o' type='radio' checked=val == data[p])
    label(for=`o${p}`) #{p}
    - darr.push(`${data[p]}% for year ${p}`)
  - }
  .pie(aria-label=`Value as pie chart. ${darr.join(', ')}.` 
       role='graphics-document group')

15 (karena, sepintar mungkin,

- var darr = [], val;

.wrap
  - for(var p in data) {
    - if(!val) val = data[p];
    input(id=`o${p}` name='o' type='radio' checked=val == data[p])
    label(for=`o${p}`) #{p}
    - darr.push(`${data[p]}% for year ${p}`)
  - }
  .pie(aria-label=`Value as pie chart. ${darr.join(', ')}.` 
       role='graphics-document group')

40 kacau di Edge)

- var darr = [], val;

.wrap
  - for(var p in data) {
    - if(!val) val = data[p];
    input(id=`o${p}` name='o' type='radio' checked=val == data[p])
    label(for=`o${p}`) #{p}
    - darr.push(`${data[p]}% for year ${p}`)
  - }
  .pie(aria-label=`Value as pie chart. ${darr.join(', ')}.` 
       role='graphics-document group')

_6

Ini semua memberi kita fallback bagan batang untuk browser yang tidak mendukung

style
  - for(var p in data) {
    | #o#{p}:checked ~ .pie { --p: #{data[p]} }
  - }

2

Fallback untuk hasil diagram lingkaran akhir (demo langsung)

Menanggapi itu semua

Satu masalah yang masih kita miliki adalah, jika area pandang lebih sempit dari diameter pai, semuanya tidak akan terlihat bagus lagi.

Variabel CSS dan kueri media untuk menyelamatkan

Kami mengatur diameter ke variabel CSS (

- var darr = [], val;

.wrap
  - for(var p in data) {
    - if(!val) val = data[p];
    input(id=`o${p}` name='o' type='radio' checked=val == data[p])
    label(for=`o${p}`) #{p}
    - darr.push(`${data[p]}% for year ${p}`)
  - }
  .pie(aria-label=`Value as pie chart. ${darr.join(', ')}.` 
       role='graphics-document group')

42) yang digunakan untuk mengatur dimensi pai dan posisi label nilai di tengah irisan kami

- var darr = [], val;

.wrap
  - for(var p in data) {
    - if(!val) val = data[p];
    input(id=`o${p}` name='o' type='radio' checked=val == data[p])
    label(for=`o${p}`) #{p}
    - darr.push(`${data[p]}% for year ${p}`)
  - }
  .pie(aria-label=`Value as pie chart. ${darr.join(', ')}.` 
       role='graphics-document group')

_7

Di bawah lebar area pandang tertentu, kita juga mengurangi

$d: 20rem;

.wrap { width: $d; }

.pie {
  padding: 50%;
  background: conic-gradient(#ab3e5b calc(var(--p)*1%), #ef746f 0%);
}

3,

- var darr = [], val;

.wrap
  - for(var p in data) {
    - if(!val) val = data[p];
    input(id=`o${p}` name='o' type='radio' checked=val == data[p])
    label(for=`o${p}`) #{p}
    - darr.push(`${data[p]}% for year ${p}`)
  - }
  .pie(aria-label=`Value as pie chart. ${darr.join(', ')}.` 
       role='graphics-document group')

09 untuk elemen

- var darr = [], val;

.wrap
  - for(var p in data) {
    - if(!val) val = data[p];
    input(id=`o${p}` name='o' type='radio' checked=val == data[p])
    label(for=`o${p}`) #{p}
    - darr.push(`${data[p]}% for year ${p}`)
  - }
  .pie(aria-label=`Value as pie chart. ${darr.join(', ')}.` 
       role='graphics-document group')

45 kita, dan kita tidak lagi memposisikan label nilai di tengah potongan pai gelap, melainkan di tengah pai itu sendiri

- var darr = [], val;

.wrap
  - for(var p in data) {
    - if(!val) val = data[p];
    input(id=`o${p}` name='o' type='radio' checked=val == data[p])
    label(for=`o${p}`) #{p}
    - darr.push(`${data[p]}% for year ${p}`)
  - }
  .pie(aria-label=`Value as pie chart. ${darr.join(', ')}.` 
       role='graphics-document group')

_8

Ini memberi kita hasil akhir kita. diagram lingkaran responsif di browser yang mendukung

style
  - for(var p in data) {
    | #o#{p}:checked ~ .pie { --p: #{data[p]} }
  - }

2 secara asli. Dan, meskipun sayangnya itu hanya browser Blink untuk saat ini, kami memiliki fallback yang solid yang membuat bagan batang responsif untuk semua browser lainnya. Kami juga menganimasikan antara nilai—ini bahkan lebih terbatas pada saat ini, hanya Blink browser dengan bendera fitur Platform Web Eksperimental diaktifkan

Lihat Pena oleh thebabydino (@thebabydino) di CodePen

Bonus. kemajuan radial

Kita juga bisa menerapkan konsep ini untuk membangun indikator progres radial seperti di bawah ini (terinspirasi oleh Pena ini)

Kemajuan radial dan fallback-nya

Tekniknya hampir sama, kecuali kita membiarkan label nilai mati di tengah dan menyetel

style
  - for(var p in data) {
    | #o#{p}:checked ~ .pie { --p: #{data[p]} }
  - }

2 pada elemen semu

- var darr = [], val;

.wrap
  - for(var p in data) {
    - if(!val) val = data[p];
    input(id=`o${p}` name='o' type='radio' checked=val == data[p])
    label(for=`o${p}`) #{p}
    - darr.push(`${data[p]}% for year ${p}`)
  - }
  .pie(aria-label=`Value as pie chart. ${darr.join(', ')}.` 
       role='graphics-document group')

48. Ini karena kita menggunakan

- var darr = [], val;

.wrap
  - for(var p in data) {
    - if(!val) val = data[p];
    input(id=`o${p}` name='o' type='radio' checked=val == data[p])
    label(for=`o${p}`) #{p}
    - darr.push(`${data[p]}% for year ${p}`)
  - }
  .pie(aria-label=`Value as pie chart. ${darr.join(', ')}.` 
       role='graphics-document group')

_49 untuk menghilangkan semuanya, kecuali cincin luar yang tipis dan, jika kita menyetel

style
  - for(var p in data) {
    | #o#{p}:checked ~ .pie { --p: #{data[p]} }
  - }

2 dan

- var darr = [], val;

.wrap
  - for(var p in data) {
    - if(!val) val = data[p];
    input(id=`o${p}` name='o' type='radio' checked=val == data[p])
    label(for=`o${p}`) #{p}
    - darr.push(`${data[p]}% for year ${p}`)
  - }
  .pie(aria-label=`Value as pie chart. ${darr.join(', ')}.` 
       role='graphics-document group')

49 pada elemen itu sendiri, maka

- var darr = [], val;

.wrap
  - for(var p in data) {
    - if(!val) val = data[p];
    input(id=`o${p}` name='o' type='radio' checked=val == data[p])
    label(for=`o${p}`) #{p}
    - darr.push(`${data[p]}% for year ${p}`)
  - }
  .pie(aria-label=`Value as pie chart. ${darr.join(', ')}.` 
       role='graphics-document group')

49 juga akan menyembunyikan label nilai di dalamnya dan kita menginginkannya

Saat mengklik

- var darr = [], val;

.wrap
  - for(var p in data) {
    - if(!val) val = data[p];
    input(id=`o${p}` name='o' type='radio' checked=val == data[p])
    label(for=`o${p}`) #{p}
    - darr.push(`${data[p]}% for year ${p}`)
  - }
  .pie(aria-label=`Value as pie chart. ${darr.join(', ')}.` 
       role='graphics-document group')

_53, nilai baru untuk persentase tanpa unit kami (

<style><div class="wrap">
  <input id="o2016" name="o" type="radio" checked="checked"/>
  <label for="o2016">2016</label>
  <input id="o2017" name="o" type="radio"/>
  <label for="o2017">2017</label>
  <input id="o2018" name="o" type="radio"/>
  <label for="o2018">2018</label>
  <div class="pie" aria-label="Value as pie chart. 20% for year 2016, 26% for year 2017, 29% for year 2018." role="graphics-document group"></div>
</div>

9) dihasilkan secara acak dan kami beralih dengan lancar antar nilai. Menetapkan

- var darr = [], val;

.wrap
  - for(var p in data) {
    - if(!val) val = data[p];
    input(id=`o${p}` name='o' type='radio' checked=val == data[p])
    label(for=`o${p}`) #{p}
    - darr.push(`${data[p]}% for year ${p}`)
  - }
  .pie(aria-label=`Value as pie chart. ${darr.join(', ')}.` 
       role='graphics-document group')

55 tetap akan membuat

$d: 20rem;

.wrap { width: $d; }

.pie {
  padding: 50%;
  background: conic-gradient(#ab3e5b calc(var(--p)*1%), #ef746f 0%);
}

4 yang sangat lambat antara dua nilai dekat (e. g.

- var darr = [], val;

.wrap
  - for(var p in data) {
    - if(!val) val = data[p];
    input(id=`o${p}` name='o' type='radio' checked=val == data[p])
    label(for=`o${p}`) #{p}
    - darr.push(`${data[p]}% for year ${p}`)
  - }
  .pie(aria-label=`Value as pie chart. ${darr.join(', ')}.` 
       role='graphics-document group')

_57 hingga

- var darr = [], val;

.wrap
  - for(var p in data) {
    - if(!val) val = data[p];
    input(id=`o${p}` name='o' type='radio' checked=val == data[p])
    label(for=`o${p}`) #{p}
    - darr.push(`${data[p]}% for year ${p}`)
  - }
  .pie(aria-label=`Value as pie chart. ${darr.join(', ')}.` 
       role='graphics-document group')

58) dan sangat cepat

$d: 20rem;

.wrap { width: $d; }

.pie {
  padding: 50%;
  background: conic-gradient(#ab3e5b calc(var(--p)*1%), #ef746f 0%);
}

4 saat berpindah antar nilai dengan jarak yang lebih besar di antaranya (e. g.

- var darr = [], val;

.wrap
  - for(var p in data) {
    - if(!val) val = data[p];
    input(id=`o${p}` name='o' type='radio' checked=val == data[p])
    label(for=`o${p}`) #{p}
    - darr.push(`${data[p]}% for year ${p}`)
  - }
  .pie(aria-label=`Value as pie chart. ${darr.join(', ')}.` 
       role='graphics-document group')

60 hingga

- var darr = [], val;

.wrap
  - for(var p in data) {
    - if(!val) val = data[p];
    input(id=`o${p}` name='o' type='radio' checked=val == data[p])
    label(for=`o${p}`) #{p}
    - darr.push(`${data[p]}% for year ${p}`)
  - }
  .pie(aria-label=`Value as pie chart. ${darr.join(', ')}.` 
       role='graphics-document group')

61). Kita menyiasatinya dengan membuat

- var darr = [], val;

.wrap
  - for(var p in data) {
    - if(!val) val = data[p];
    input(id=`o${p}` name='o' type='radio' checked=val == data[p])
    label(for=`o${p}`) #{p}
    - darr.push(`${data[p]}% for year ${p}`)
  - }
  .pie(aria-label=`Value as pie chart. ${darr.join(', ')}.` 
       role='graphics-document group')

_55 bergantung pada nilai absolut selisih antara nilai sebelumnya dari

<style><div class="wrap">
  <input id="o2016" name="o" type="radio" checked="checked"/>
  <label for="o2016">2016</label>
  <input id="o2017" name="o" type="radio"/>
  <label for="o2017">2017</label>
  <input id="o2018" name="o" type="radio"/>
  <label for="o2018">2018</label>
  <div class="pie" aria-label="Value as pie chart. 20% for year 2016, 26% for year 2017, 29% for year 2018." role="graphics-document group"></div>
</div>

9 dan nilai yang baru dihasilkan

- var darr = [], val;

.wrap
  - for(var p in data) {
    - if(!val) val = data[p];
    input(id=`o${p}` name='o' type='radio' checked=val == data[p])
    label(for=`o${p}`) #{p}
    - darr.push(`${data[p]}% for year ${p}`)
  - }
  .pie(aria-label=`Value as pie chart. ${darr.join(', ')}.` 
       role='graphics-document group')

_9

<style><div class="wrap">
  <input id="o2016" name="o" type="radio" checked="checked"/>
  <label for="o2016">2016</label>
  <input id="o2017" name="o" type="radio"/>
  <label for="o2017">2017</label>
  <input id="o2018" name="o" type="radio"/>
  <label for="o2018">2018</label>
  <div class="pie" aria-label="Value as pie chart. 20% for year 2016, 26% for year 2017, 29% for year 2018." role="graphics-document group"></div>
</div>

0

Ini memberi kami indikator kemajuan radial animasi yang bagus untuk browser yang mendukung semua fitur baru dan berkilau. Kami memiliki fallback linier untuk browser yang tidak mendukung

style
  - for(var p in data) {
    | #o#{p}:checked ~ .pie { --p: #{data[p]} }
  - }

2 secara asli dan tidak ada

$d: 20rem;

.wrap { width: $d; }

.pie {
  padding: 50%;
  background: conic-gradient(#ab3e5b calc(var(--p)*1%), #ef746f 0%);
}

4 jika tidak ada dukungan Houdini

Bagaimana cara membuat diagram lingkaran dinamis dalam HTML?

Anda dapat membuat Bagan Pai dalam HTML menggunakan fungsi CSS sederhana bernama conic-gradient . Pertama, kita menambahkan elemen

Bagaimana Anda membuat diagram lingkaran dinamis?

Membuat diagram lingkaran dinamis menggunakan rumus offset .

Langkah 1. Buat tabel dan masukkan nilai di dalamnya. .

Langkah 2. Nilai total 550 muncul di sel

Langkah 3. Sekarang, seret rumus yang telah diisi untuk mendapatkan semua baris dari total kolom

Langkah 4. Pilih nilai yang perlu digunakan untuk membuat diagram lingkaran dinamis

Bagaimana cara membuat diagram lingkaran di CSS?

Pengaturan CSS untuk Bagan Pai . 1 untuk memastikan elemen tetap persegi use aspect-ratio: 1 to make sure the element remains square . Kita juga bisa menggunakan tinggi. var(--w) tetapi selalu baik untuk mempelajari dan menggunakan properti CSS baru. Anda mungkin bertanya-tanya mengapa saya menggunakan variabel untuk menentukan lebar, bukan hanya mengatur lebar. 150px.

Mengapa diagram lingkaran 3D tidak direkomendasikan?

Terakhir, mendistorsi data pada diagram lingkaran jauh lebih mudah daripada jenis lainnya . Karena kita sudah sangat buruk dalam membedakan antara irisan pai yang berbeda, jika Anda memiringkan bagan pai atau menjadikannya "3D", seperti yang sangat populer di banyak program, Anda dengan cepat mempersulit untuk membaca dan mendistorsi data Anda .

kode html