Ada banyak cara untuk membuat representasi visual dari data. bagan batang, grafik garis, diagram pencar, grafik mini… belum lagi banyak cara yang dapat Anda gunakan untuk menerapkannya di web. Dalam posting ini saya akan melihat metode CSS biasa untuk menata data. Namun sebelum kita melihat beberapa contoh, saya pikir ada baiknya membahas secara singkat tujuan desain kita terlebih dahulu
Pedoman Pembuatan Bagan
Ada tiga pedoman untuk mengembangkan bagan di web
- Aksesibilitas. setiap orang harus dapat melihat beberapa format data yang kami sajikan, meskipun itu membosankan table (membosankan lebih baik daripada tidak sama sekali)
- Kemudahan pengembangan. pembuatan grafik seharusnya tidak terlalu rumit, dan kami pasti ingin menghindari hutang teknis untuk masa depan
- Pertunjukan. kami perlu memastikan bahwa pengguna tidak menghabiskan banyak waktu menunggu aset diunduh atau elemen dicat ke layar
Sasaran ini cenderung berubah tergantung pada jenis bagan yang dibuat, karena kinerja akan kurang menjadi perhatian bagan batang statis daripada peta interaktif yang gila. Dengan mengingat pedoman ini, mari kita lihat beberapa contoh
Bagan Batang CSS
Ada beberapa cara untuk membuat diagram batang sederhana di CSS. Sebagai permulaan, kami akan menggunakan daftar definisi untuk data kami
<dl> <dt>A title of the graph</dt> <dd class="percentage"><span class="text"> Data 1: 20% </span></dd> <dd class="percentage"><span class="text"> Data 2: 50% </span></dd> <dd class="percentage"><span class="text"> Data 3: 30% </span></dd> </dl>Kami benar-benar akan memposisikan konten teks dari setiap dd ke kiri dengan rentang tersebut
Untuk membuat "bar" yang mewakili data secara visual, kami akan menggunakan elemen semu. Untuk melakukannya, kita dapat memperbarui markup dengan kelas seperti .percentage-20, dan menetapkan lebar pada elemen semunya
.percentage:after { content: ""; display: block; background-color: #3d9970; } .percentage-20:after { width: 20%; } .percentage-30:after { width: 30%; }_Tapi kami tidak ingin menulis setiap kelas ini dengan tangan karena datanya kemungkinan akan berubah di masa mendatang. Kita bisa menulis Sass loop untuk membuat semua kelas itu untuk kita
Itu sedikit menjijikkan karena akan membuat banyak sekali kelas yang mungkin tidak akan kita gunakan dalam implementasi akhir, tetapi ada banyak alat untuk merapikannya untuk kita dalam produksi
Selanjutnya, kita dapat menambahkan kelas-kelas yang telah kita buat secara otomatis ke setiap elemen .percentage:after { content: ""; display: block; background-color: #3d9970; } .percentage-20:after { width: 20%; } .percentage-30:after { width: 30%; }0, seperti itu
<dl> <dt>A title of the graph</dt> <dd class="percentage percentage-7"><span class="text"> IE 11: 7% </span></dd> <dd class="percentage percentage-20"><span class="text"> Chrome: 20% </span></dd> <dd class="percentage percentage-2"><span class="text"> Android 4.4: 2% </span></dd> </dl>_Terakhir, kita dapat menambahkan aturan ke latar belakang setiap elemen .percentage:after { content: ""; display: block; background-color: #3d9970; } .percentage-20:after { width: 20%; } .percentage-30:after { width: 30%; }0 untuk membantu keterbacaan dalam membandingkan nilai ini dengan .percentage:after { content: ""; display: block; background-color: #3d9970; } .percentage-20:after { width: 20%; } .percentage-30:after { width: 30%; }2
.percentage { background: repeating-linear-gradient( to right, #ddd, #ddd 1px, #fff 1px, #fff 5% ); }CodePen Embed Fallback
Teknik ini relatif sederhana, tetapi menurut saya informasi ini harus selalu diatur dalam table secara default. Meskipun saya sedikit waspada dengan penataan meja dengan cara ini, bukan berarti itu tidak mungkin. Misalnya, Eric Meyer menulis tentang teknik ini dan menjelaskan cara memposisikan elemen tabel rewel agar berperilaku seperti bagan batang. Ini adalah markup aslinya untuk tabel
<table id="q-graph"> <caption>Quarterly Results</caption> <thead> <tr> <th></th> <th class="sent">Invoiced</th> <th class="paid">Collected</th> </tr> </thead> <tbody> <tr class="qtr" id="q1"> <th scope="row">Q1</th> <td class="sent bar"><p>$18,450.00</p></td> <td class="paid bar"><p>$16,500.00</p></td> </tr> <tr class="qtr" id="q2"> <th scope="row">Q2</th> <td class="sent bar"><p>$34,340.72</p></td> <td class="paid bar"><p>$32,340.72</p></td> </tr> <tr class="qtr" id="q3"> <th scope="row">Q3</th> <td class="sent bar"><p>$43,145.52</p></td> <td class="paid bar"><p>$32,225.52</p></td> </tr> <tr class="qtr" id="q4"> <th scope="row">Q4</th> <td class="sent bar"><p>$18,415.96</p></td> <td class="paid bar"><p>$32,425.00</p></td> </tr> </tbody> </table>_Tidak seperti contoh yang saya gunakan sebelumnya, di mana saya menerapkan sejumlah kelas pembantu yang dibuat secara otomatis di Sass untuk menentukan lebar bagan batang, Eric menggunakan gaya sebaris pada elemen .percentage:after { content: ""; display: block; background-color: #3d9970; } .percentage-20:after { width: 20%; } .percentage-30:after { width: 30%; }4 dengan nilai-nilai tersebut dihitung sisi server atau dengan JavaScript, daripada ditambahkan
Contoh di bawah ini adalah salinan contoh asli Eric di mana saya telah sedikit memperbarui gaya
CodePen Embed Fallback
Saya sangat suka bahwa setiap baris dalam tabel memiliki tajuk seperti Q1, Q2, dll. — yang terasa sangat rapi dan rapi daripada bergantung pada daftar definisi untuk mendeskripsikan konten. Mereka mudah diposisikan dan akan kembali dengan baik ke tabel standar jika CSS gagal dimuat karena alasan apa pun
Namun, salah satu masalah dengan pendekatan ini adalah bahwa ini benar-benar membutuhkan pemosisian setiap baris tabel berdampingan, yang berarti bahwa jika kita ingin menambahkan lebih banyak data maka kita harus melakukan lebih banyak pekerjaan daripada sekadar memperbarui markup. Ini berarti akan sulit untuk bekerja dengannya di masa depan
Sparkline
Kami tidak selalu harus menggunakan table saat merepresentasikan informasi seperti ini. Itu mungkin terjadi ketika kami membuat serangkaian grafik mini, grafik kecil yang berada di sebelah baris teks dan membantu pembaca mendapatkan gambaran singkat tentang informasi tersebut. Wilson Miner menguraikan metode ini dan memastikan untuk fokus pada aksesibilitas informasi sebelumnya
<figure> <ul class="sparklist"> <li> <a href="//www.example.com/fruits/apples/">Apples</a> <span class="sparkline"> <span class="index"><span class="count" style="height: 27%;">(60,</span> </span> <span class="index"><span class="count" style="height: 97%;">220,</span> </span> <span class="index"><span class="count" style="height: 62%;">140,</span> </span> <span class="index"><span class="count" style="height: 35%;">80,</span> </span> </span> </li> </ul> <figcaption>Fruits eaten in the last 14 days by type</figcaption> </figure>Saya telah memperbarui markup asli dari apa yang digunakan Wilson karena bagi saya ini terasa seperti cocok dengan .percentage:after { content: ""; display: block; background-color: #3d9970; } .percentage-20:after { width: 20%; } .percentage-30:after { width: 30%; }6, karena dokumen di MDN menyatakan bahwa
Biasanya [a figure]… adalah gambar, ilustrasi, diagram, cuplikan kode, atau skema yang direferensikan dalam teks utama, tetapi dapat dipindahkan ke halaman lain atau ke lampiran tanpa memengaruhi alur utama
Itu jauh lebih masuk akal bagi saya daripada elemen .percentage:after { content: ""; display: block; background-color: #3d9970; } .percentage-20:after { width: 20%; } .percentage-30:after { width: 30%; }7 biasa. Tapi bagaimanapun, inilah tampilannya tanpa CSS apa pun
CodePen Embed Fallback
Sangat mudah diakses. Selanjutnya kita dapat menambahkan gaya ke elemen .percentage:after { content: ""; display: block; background-color: #3d9970; } .percentage-20:after { width: 20%; } .percentage-30:after { width: 30%; }_8 itu dan memposisikannya di sebelah kanan tautan dengan blok-sebaris. Dan lagi, kita bisa menggunakan generator kelas Sass yang kita gunakan sebelumnya untuk mengatur ketinggian setiap batang. Namun, mari pertahankan gaya tersebut untuk saat ini saja
CodePen Embed Fallback
Pastikan untuk mengarahkan kursor ke setiap entri dalam daftar untuk melihat versi diagram yang diperluas yang telah saya tambahkan. Meskipun tidak terlalu membantu dalam hal memecah data, ini menunjukkan bahwa kami tidak terjebak dengan bagan dalam satu representasi tunggal;
Bagan Pai CSS
Lea Verou baru-baru ini menulis artikel hebat tentang membuat diagram lingkaran. Satu kemungkinan yang dia sarankan adalah menggunakan elemen semu yang menutupi lingkaran dan menyenggolnya dengan .percentage:after { content: ""; display: block; background-color: #3d9970; } .percentage-20:after { width: 20%; } .percentage-30:after { width: 30%; }9
Kemungkinan lain adalah SVG, yang memiliki sejumlah keunggulan, beberapa di antaranya akan kami cantumkan di bagian selanjutnya
Jika browser mendukung @for $i from 1 through 100 { .percentage-#{$i}:after { $value: ($i * 1%); width: $value; } }_0, itu akan menjadi cara yang sangat menarik untuk membuatnya. Mereka belum cukup, tetapi Lea memiliki polyfill untuk itu yang bekerja dengan sangat baik. Ini adalah demo diagram lingkaran yang kami buat untuk salah satu jajak pendapat terakhir yang kami lakukan di sini di CSS-Tricks
CodePen Embed Fallback
Masalah dalam membuat bagan dengan CSS
- Jika Anda menggunakan @for $i from 1 through 100 { .percentage-#{$i}:after { $value: ($i * 1%); width: $value; } }_1 untuk memberi gaya pada suatu elemen, maka elemen tersebut (mungkin) tidak akan terlihat jika halaman web dicetak. Satu-satunya pengecualian adalah jika Anda menggunakan @for $i from 1 through 100 { .percentage-#{$i}:after { $value: ($i * 1%); width: $value; } }_2 di browser WebKit
- Kontrol rewel atas desain. benar-benar memposisikan baris tabel, misalnya, kemungkinan besar akan menyusahkan pengembang di beberapa titik di masa mendatang
- Dukungan browser adalah proses yang melelahkan dalam beberapa kasus, dan memastikan bahwa semua perangkat mendukung setiap properti CSS mungkin sulit untuk diuji
- Tidak mungkin menggunakan gaya sebaris pada elemen semu, jadi jika Anda ingin memberi gaya pada elemen semu dengan JavaScript maka ini membuat segalanya menjadi sedikit lebih rumit
- Itu mungkin untuk melakukan apa saja dengan CSS, tetapi ketika kita membuat grafik garis CSS murni kita mungkin harus mengambil sedikit waktu untuk mempertimbangkan kembali implikasi yang mungkin ada pada basis kode lainnya.
Membungkus
CSS biasa dan solusi markup untuk bagan dan grafik berfungsi sampai batas tertentu, dan dalam banyak situasi, solusi tersebut mungkin merupakan pilihan yang paling aman. Tapi menurut saya ada baiknya mencari solusi alternatif untuk merepresentasikan data