Bermain-main dengan mengubah 

@bar-color:#F16335;
@bar-thickness:50px;
@bar-rounded: 3px;
@bar-spacing:30px;

7 dan 

@bar-color:#F16335;
@bar-thickness:50px;
@bar-rounded: 3px;
@bar-spacing:30px;

9 atribut di elemen 

@bar-color:#F16335;
@bar-thickness:50px;
@bar-rounded: 3px;
@bar-spacing:30px;

6 untuk membuat bagan batang HTML dengan data Anda

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

1. Aksesibilitas. setiap orang harus dapat melihat beberapa format data yang kami sajikan, meskipun itu membosankan table (membosankan lebih baik daripada tidak sama sekali)
2. Kemudahan pengembangan. pembuatan grafik seharusnya tidak terlalu rumit, dan kami pasti ingin menghindari hutang teknis untuk masa depan
3. 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

  
A title of the graph
  
 Data 1: 20% 
  
 Data 2: 50% 
  
 Data 3: 30% 

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

@for $i from 1 through 100 {
  .percentage-#{$i}:after {
    $value: ($i * 1%);
    width: $value;
  }
}

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

  
A title of the graph
  
 IE 11: 7% 
  
 Chrome: 20% 
  
 Android 4.4: 2% 

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

  
Quarterly Results
  

    

      

      
Invoiced
      
Collected
    
  
  

    

      
Q1
      
$18,450.00
      
$16,500.00
    
    

      
Q2
      
$34,340.72
      
$32,340.72
    
    

      
Q3
      
$43,145.52
      
$32,225.52
    
    

      
Q4
      
$18,415.96
      
$32,425.00
    
  

Tidak seperti contoh yang saya gunakan sebelumnya, di mana saya menerapkan sejumlah kelas pembantu yang dihasilkan 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 tables 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

  

    

      Apples
      
        (60, 
        220, 
        140, 
        80, 
      
    
  
  

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, 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

Bagaimana cara membuat grafik HTML?

Bagaimana cara membuat grafik garis dalam HTML?

Bagaimana cara membuat grafik untuk situs web saya?

Bagaimana cara membuat grafik batang menggunakan HTML dan CSS?