Biểu đồ css tinh khiết

Có nhiều cách để biểu diễn trực quan dữ liệu. biểu đồ thanh, biểu đồ đường, sơ đồ phân tán, biểu đồ thu nhỏ… chưa kể đến nhiều cách mà bạn có thể triển khai chúng trên web. Trong bài đăng này, tôi sẽ xem xét các phương thức CSS đơn giản để tạo kiểu dữ liệu. Nhưng trước khi chúng ta xem xét một số ví dụ, tôi nghĩ rằng trước tiên chúng ta nên lướt qua các mục tiêu thiết kế của mình một cách ngắn gọn

Hướng dẫn lập biểu đồ

Có ba hướng dẫn để phát triển biểu đồ trên web

1. khả năng tiếp cận. mọi người sẽ có thể xem một số định dạng dữ liệu chúng tôi trình bày, ngay cả khi đó là một

   .percentage:after {
     content: "";
     display: block;
     background-color: #3d9970;
   }
   .percentage-20:after {
     width: 20%;
   }
   .percentage-30:after {
     width: 30%;
   }

   8 nhàm chán (nhàm chán còn hơn không)
2. Dễ dàng phát triển. việc tạo biểu đồ không nên phức tạp một cách không cần thiết và chúng tôi chắc chắn sẽ muốn tránh nợ kỹ thuật trong tương lai
3. Màn biểu diễn. chúng tôi cần đảm bảo rằng người dùng không mất nhiều thời gian chờ đợi nội dung tải xuống hoặc các yếu tố được vẽ trên màn hình

Các mục tiêu này có thể thay đổi tùy thuộc vào loại biểu đồ tạo ra, vì hiệu suất sẽ ít được quan tâm hơn đối với biểu đồ thanh tĩnh hơn là bản đồ tương tác điên cuồng. Với những hướng dẫn này trong tâm trí, chúng ta hãy xem xét một vài ví dụ

Biểu đồ thanh CSS

Có một số cách để tạo biểu đồ thanh đơn giản trong CSS. Để bắt đầu, chúng tôi sẽ sử dụng danh sách định nghĩa cho dữ liệu của mình

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

Chúng tôi sẽ hoàn toàn định vị nội dung văn bản của mỗi

.percentage:after {
  content: "";
  display: block;
  background-color: #3d9970;
}
.percentage-20:after {
  width: 20%;
}
.percentage-30:after {
  width: 30%;
}

9 ở bên trái với khoảng thời gian đó

Để tạo các “thanh” biểu thị dữ liệu một cách trực quan, chúng ta sẽ sử dụng các phần tử giả. Để làm điều đó, chúng tôi có thể cập nhật đánh dấu với các lớp như

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

0 và đặt chiều rộng cho phần tử giả của nó

.percentage:after {
  content: "";
  display: block;
  background-color: #3d9970;
}
.percentage-20:after {
  width: 20%;
}
.percentage-30:after {
  width: 30%;
}

Nhưng chúng tôi không muốn phải viết tay từng lớp một vì dữ liệu có thể thay đổi trong tương lai. Chúng ta có thể viết một vòng lặp Sass để tạo tất cả các lớp đó cho chúng ta

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

Điều đó hơi rắc rối vì nó sẽ tạo ra cả đống lớp mà chúng ta có thể sẽ không sử dụng trong quá trình triển khai cuối cùng, nhưng có rất nhiều công cụ giúp chúng ta dọn dẹp việc này trong quá trình sản xuất

Tiếp theo, chúng ta có thể thêm các lớp mà chúng ta đã tự động tạo vào từng phần tử

.percentage:after {
  content: "";
  display: block;
  background-color: #3d9970;
}
.percentage-20:after {
  width: 20%;
}
.percentage-30:after {
  width: 30%;
}

0, như vậy

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

Cuối cùng, chúng ta có thể thêm các quy tắc vào nền của từng phần tử

.percentage:after {
  content: "";
  display: block;
  background-color: #3d9970;
}
.percentage-20:after {
  width: 20%;
}
.percentage-30:after {
  width: 30%;
}

0 để hỗ trợ tính dễ đọc khi so sánh các giá trị này với một

.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%
  );
}

Dự phòng nhúng CodePen

Kỹ thuật này tương đối đơn giản, nhưng tôi không thể không nghĩ rằng thông tin này phải luôn được đặt ở dạng

.percentage:after {
  content: "";
  display: block;
  background-color: #3d9970;
}
.percentage-20:after {
  width: 20%;
}
.percentage-30:after {
  width: 30%;
}

8 theo mặc định. Mặc dù tôi hơi cảnh giác với việc tạo kiểu bảng theo cách này, nhưng điều đó chắc chắn không có nghĩa là không thể. Chẳng hạn, Eric Meyer đã viết về kỹ thuật này và mô tả cách định vị các thành phần bảng phức tạp để hoạt động giống như một biểu đồ thanh. Đây là đánh dấu ban đầu của anh ấy cho bảng

________số 8

Không giống như ví dụ tôi đã sử dụng trước đó, nơi tôi đã triển khai một số lớp trình trợ giúp được tạo tự động trong Sass để xác định độ rộng của biểu đồ thanh, Eric đã sử dụng các kiểu nội tuyến trên phần tử

.percentage:after {
  content: "";
  display: block;
  background-color: #3d9970;
}
.percentage-20:after {
  width: 20%;
}
.percentage-30:after {
  width: 30%;
}

4 với các giá trị đó được tính toán phía máy chủ hoặc bằng JavaScript, thay vì được thêm vào

Ví dụ dưới đây là bản sao của tôi về ví dụ ban đầu của Eric, nơi tôi đã cập nhật kiểu dáng một chút

Dự phòng nhúng CodePen

Tôi thực sự thích rằng mỗi hàng trong bảng có một tiêu đề chẳng hạn như Q1, Q2, v.v. — cảm giác thực sự gọn gàng và ngăn nắp hơn là phụ thuộc vào danh sách định nghĩa để mô tả nội dung. Chúng rất dễ định vị và sẽ quay trở lại một bảng tiêu chuẩn nếu CSS không tải được vì bất kỳ lý do gì

Tuy nhiên, một trong những vấn đề với cách tiếp cận này là nó yêu cầu định vị tuyệt đối từng hàng của bảng cạnh nhau, điều đó có nghĩa là nếu chúng ta muốn thêm nhiều dữ liệu hơn thì chúng ta sẽ cần thực hiện nhiều công việc hơn là chỉ cập nhật đánh dấu. Điều này có nghĩa là nó có thể là một nỗi đau để làm việc với trong tương lai

đường lấp lánh

Không phải lúc nào chúng ta cũng phải sử dụng

.percentage:after {
  content: "";
  display: block;
  background-color: #3d9970;
}
.percentage-20:after {
  width: 20%;
}
.percentage-30:after {
  width: 30%;
}

8 khi trình bày thông tin như thế này. Đó có thể là trường hợp khi chúng tôi tạo một loạt biểu đồ thu nhỏ, biểu đồ nhỏ nằm bên cạnh một dòng văn bản và giúp người đọc có cái nhìn tổng quan về thông tin. Wilson Miner đã phác thảo phương pháp này và đảm bảo tập trung vào khả năng tiếp cận thông tin trước đó

.percentage:after {
  content: "";
  display: block;
  background-color: #3d9970;
}
.percentage-20:after {
  width: 20%;
}
.percentage-30:after {
  width: 30%;
}

0

Tôi đã cập nhật đánh dấu ban đầu từ những gì Wilson đã sử dụng vì đối với tôi, điều này có vẻ phù hợp với một

.percentage:after {
  content: "";
  display: block;
  background-color: #3d9970;
}
.percentage-20:after {
  width: 20%;
}
.percentage-30:after {
  width: 30%;
}

6, vì các tài liệu trên MDN nói rằng

Thông thường [một hình]… là một hình ảnh, hình minh họa, sơ đồ, đoạn mã hoặc lược đồ được tham chiếu trong văn bản chính nhưng có thể được chuyển sang trang khác hoặc sang phụ lục mà không ảnh hưởng đến luồng chính

Điều đó có ý nghĩa hơn nhiều đối với tôi hơn là một yếu tố

.percentage:after {
  content: "";
  display: block;
  background-color: #3d9970;
}
.percentage-20:after {
  width: 20%;
}
.percentage-30:after {
  width: 30%;
}

7 đơn giản. Nhưng dù sao đi nữa, đây là giao diện khi không có CSS

Dự phòng nhúng CodePen

Rất dễ tiếp cận. Tiếp theo, chúng ta có thể thêm các kiểu vào phần tử

.percentage:after {
  content: "";
  display: block;
  background-color: #3d9970;
}
.percentage-20:after {
  width: 20%;
}
.percentage-30:after {
  width: 30%;
}

8 đó và đặt nó ở bên phải của liên kết bằng khối nội tuyến. Và một lần nữa, chúng ta có thể sử dụng trình tạo lớp Sass mà chúng ta đã sử dụng trước đó để đặt chiều cao của mỗi thanh. Tuy nhiên, bây giờ chúng ta hãy giữ những kiểu nội tuyến đó

Dự phòng nhúng CodePen

Đảm bảo di chuột qua từng mục trong danh sách để xem phiên bản mở rộng của sơ đồ mà tôi đã thêm. Mặc dù nó không đặc biệt hữu ích trong việc chia nhỏ dữ liệu, nhưng nó cho thấy rằng chúng ta không bị mắc kẹt với các biểu đồ trong một biểu diễn duy nhất;

Biểu đồ hình tròn CSS

Lea Verou gần đây đã viết một đoạn tuyệt vời về cách tạo biểu đồ hình tròn. Một khả năng mà cô ấy gợi ý là sử dụng các phần tử giả bao phủ một vòng tròn và di chuyển chúng xung quanh bằng

.percentage:after {
  content: "";
  display: block;
  background-color: #3d9970;
}
.percentage-20:after {
  width: 20%;
}
.percentage-30:after {
  width: 30%;
}

9

Một khả năng khác là SVG, có một số ưu điểm, chúng tôi sẽ liệt kê một số ưu điểm trong phần tiếp theo

Nếu các trình duyệt hỗ trợ

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

0, đó sẽ là một cách rất hấp dẫn để tạo ra chúng. Chúng vẫn chưa hoàn chỉnh, nhưng Lea có một polyfill cho nó hoạt động tuyệt vời. Đây là bản trình diễn biểu đồ tròn sử dụng biểu đồ mà chúng tôi đã thực hiện cho một trong những cuộc thăm dò gần đây nhất mà chúng tôi đã thực hiện ở đây trên CSS-Tricks

Dự phòng nhúng CodePen

Các vấn đề khi tạo biểu đồ bằng CSS

• Nếu bạn đang sử dụng

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

  1 để tạo kiểu cho một phần tử thì phần tử đó (có thể) sẽ không hiển thị nếu trang web được in. Ngoại lệ duy nhất là nếu bạn sử dụng

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

  2 trong trình duyệt WebKit
• Kiểm soát chặt chẽ thiết kế. Ví dụ: các hàng trong bảng định vị tuyệt đối có thể sẽ gây khó khăn cho các nhà phát triển vào một thời điểm nào đó trong tương lai
• Hỗ trợ trình duyệt là một quá trình tốn nhiều công sức trong một số trường hợp và việc đảm bảo rằng tất cả các thiết bị đều hỗ trợ mọi thuộc tính CSS có thể khó kiểm tra
• Không thể sử dụng các kiểu nội tuyến trên các phần tử giả, vì vậy nếu bạn muốn tạo kiểu cho một phần tử giả bằng JavaScript thì điều này sẽ khiến mọi thứ phức tạp hơn một chút
• Có thể làm bất cứ điều gì với CSS, nhưng khi chúng ta tạo biểu đồ đường CSS thuần túy, có lẽ chúng ta nên dành một chút thời gian để xem xét lại những tác động mà điều này có thể có đối với phần còn lại của cơ sở mã

kết thúc

Các giải pháp đánh dấu và CSS đơn giản cho biểu đồ và đồ thị hoạt động ở một mức độ nhất định và trong nhiều trường hợp, chúng có lẽ là lựa chọn an toàn nhất. Nhưng tôi nghĩ rằng nên khám phá các giải pháp thay thế để biểu diễn dữ liệu