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
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
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
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
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
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
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
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
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
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
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
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')_0Baiklah, 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
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')1Styling 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')2Karena 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')_3Kami 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
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
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')_4Sekarang, 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')_5Kami 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')_6Ini 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
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')_7Di 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')_8Ini 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)
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>0Ini 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