Trực quan hóa dữ liệu với đồ thị CSS, biểu đồ và hơn thế nữa

Trình bày dữ liệu tốt là một khía cạnh quan trọng trong ngành công nghiệp web vì đó là chìa khóa để cho phép khách truy cập hiểu nội dung của bạn trong vài giây. Khách truy cập của bạn càng dễ dàng hoặc nhanh hơn nắm bắt nội dung web của bạn, nó càng phản ánh tính chuyên nghiệp của bạn trong việc xử lý bản trình bày. Các tiêu chí để trình bày dữ liệu hợp lý phải đơn giản nhưng mô tả, được xây dựng tốt nhưng quản lý để duy trì sự quan tâm của người dùng, không mất thời gian để tiêu hóa nội dung của nó, thuận tiện để so sánh và cuối cùng, người dùng có thể đưa ra quyết định hoặc kết luận dữ liệu được trình bày một cách dễ dàng. Khó như những tiêu chí điên rồ này có thể nghe được, có thể.

Trong bài viết hôm nay, chúng tôi muốn đưa bạn đi nhờ những cách tiếp cận khác nhau để đẹp và các công cụ trực quan hóa dữ liệu sáng tạo hoàn toàn dựa trên CSS / HTML. Vâng chỉ cần sao chép và dán sau đó tùy chỉnh nó theo sở thích của bạn. Các biểu đồ này có thể là biểu đồ thanh CSS hiển thị dữ liệu ở dạng ngang / dọc, danh sách thả xuống để sắp xếp dữ liệu của bạn hoặc thậm chí biểu đồ đường và biểu đồ hình tròn!

Bạn muốn nhiều hơn? Tiếp tục cuộn!

Barchart ngang

Một cách đơn giản để hiển thị số liệu thống kê dưới dạng tổng quan với biểu đồ thanh có thể truy cập này bằng CSS. Thanh tính toán các ô giá trị và nhãn được sử dụng. Các tiêu đề bảng được sử dụng sử dụng lớp văn bản aetic

CSSplay

Biểu đồ thanh là một danh sách dứt khoát với các kiểu và các lớp được xác định trong mỗi dòng. Biểu đồ đầu tiên có lỗi xảy ra khi các giá trị tiến gần hơn đến 100% được điều chỉnh trong biểu đồ thứ hai. Mã nguồn bao gồm để bạn tham khảo.

Tỷ lệ phần trăm

Sử dụng khả năng độ rộng phần trăm của CSS, biểu đồ thanh dựa trên tỷ lệ phần trăm được tạo ra trong hướng dẫn này. Trong biểu đồ thanh ngang, bạn có thể đặt điểm đánh dấu để di chuyển độ dài từ trái sang phải hoặc tạo biểu đồ dọc bằng cách sử dụng cùng một kỹ thuật và tái tạo nó nhiều lần

Tối đa

Russ Weakley dạy bạn tạo một biểu đồ dựa trên tỷ lệ phần trăm và sử dụng hình ảnh nền. Mã và hình ảnh được liên kết có thể được sao chép và tải xuống để sử dụng trong dự án của bạn.

Barchart dọc

Tạo biểu đồ thanh dọc bằng CSS và PHP bằng cách tạo một danh sách đơn giản với chiều cao tính bằng pixel của từng thanh, trục y của nhóm thanh và lớp để tạo kiểu cho các tập dữ liệu. Eric Meyer dạy bạn biến tương tự thành biểu đồ thanh, biểu đồ đường, biểu đồ nhọn và biểu đồ 3D bằng các kỹ thuật tương tự

Sơ đồ CSS thuần

Biểu đồ đường cung cấp thông tin nhanh hơn nhiều so với bảng có số. Tìm hiểu cách tạo biểu đồ đường bằng CSS bằng HTML, thay thế văn bản bằng hình ảnh và sử dụng các họa tiết CSS và định vị tuyệt đối để có được biểu đồ đường.

Sơ đồ đơn giản

Một biểu đồ đường đơn giản, chỉ sử dụng DHTML và CSS và nơi bạn có thể đặt nền trong suốt cho biểu đồ. Biểu đồ này tải nhanh hơn và pha trộn với phần còn lại của trang.

Máy in

Biểu đồ Ajax này được sử dụng để biểu thị dữ liệu của một năm theo mỗi tháng chỉ sử dụng CSS và XHTML và chạy trong Firefox và Opera

Danh sách nhiều người

Paul Novitski dạy bạn tạo một danh sách nhiều cột bằng CSS trong bài viết này. Ông thảo luận về nhiều kỹ thuật để đạt được danh sách nhiều cột như thả nổi danh sách phân tách, đánh số chúng bằng thuộc tính HTML, nội dung được tạo CSS, bọc danh sách bằng XHTML, CSS, v.v. và cuối cùng thêm một chút kiểu dáng và hình nền để đạt được nhiều cột danh sách hoàn hảo.

Đạn

Một biểu đồ dấu đầu dòng so sánh một biện pháp duy nhất với một hoặc nhiều biện pháp khác và hiển thị phạm vi biểu diễn định tính. Chúng khá linh hoạt cho các trang web điều khiển dữ liệu. Tìm hiểu cách tạo biểu đồ dấu đầu dòng bằng CSS / HTML.

Cột cột

Một biểu đồ thanh cột được tạo bằng CSS trong đó các giá trị được hiển thị trong các thanh dọc được tô màu đạt đến các độ cao khác nhau theo các giá trị được chỉ định. Biểu đồ này nhanh chóng cho chúng ta một ý tưởng rõ ràng vì các giá trị được in trực tiếp tại đây. Sử dụng bộ chọn CSS, họa tiết, kiểu dáng danh sách, v.v., học cách tạo biểu đồ cột từ hướng dẫn.

Đồ thị thời gian chết

Biểu đồ thời gian chết ban đầu có vấn đề hiển thị khoảng thời gian dài trên diện tích màn hình giới hạn và giữ bố cục minh bạch của các sự kiện được làm rõ theo mô hình lịch hàng tháng. OnMouseOver () được duy trì hoạt động và các màu khác nhau được sử dụng cho các loại sự kiện ngừng hoạt động khác nhau.

Biểu đồ CSS sống động

Biểu đồ CSS động trực tiếp để hiển thị thời gian phản hồi của ping được thực hiện bởi máy chủ web đọc dữ liệu từ máy chủ web bằng mã CSS và JavaScript, các hàm AJAX và biểu đồ trượt.

Ngang ngang

Một đồ thị thanh không cần phải luôn luôn. Một biểu đồ thanh ngang cũng có thể được tạo ra. Trong bài viết này, một biểu đồ thanh ngang với các biến thể màu khác nhau được tạo bằng cách sử dụng một 'biểu đồ ngang' và chỉ định chiều cao của biểu đồ từ đánh dấu bằng CSS.

Đa năng

Biểu đồ đường không sử dụng bất kỳ bảng hình ảnh nào được tạo bằng CSS và DHTML, tải nhanh hơn và nền có thể được thay đổi trong suốt.

Biểu đồ kế hoạch sản xuất

Biểu đồ kế hoạch sản xuất được tạo bằng cách sử dụng lớp biểu đồ dưới dạng biểu đồ chứa và hLine cũng vLine để vẽ đường phân cách. Biểu đồ này được sử dụng trong các ứng dụng mạng nội bộ. Độ rộng của biểu đồ được tính theo số ngày và chiều cao được hiển thị bằng cách sử dụng số lượng thay đổi công việc.

Đồ thị bánh sandwich

Biểu đồ sandwich được tạo khi một thanh đơn trong biểu đồ thanh được chia thành nhiều lớp trong đó chiều cao của một cột có thể biểu thị xu hướng toàn cầu trong khi chiều cao của một lớp biểu thị một phần của lớp này. Tạo một biểu đồ sandwich CSS từ hướng dẫn này.

Xếp chồng

Đối với biểu đồ xếp chồng, một danh sách định nghĩa được sử dụng để trình bày dữ liệu, sau đó các lề và phần đệm được đặt lại để xuất hiện giống nhau trong tất cả các trình duyệt. Các trục được thêm vào và cách điệu để có được các thanh xếp chồng lên nhau. Từng chi tiết đều được dạy chính xác trong hướng dẫn này.

Đơn giản

Một biểu đồ thanh được tạo bằng thư viện đồ họa CSS và PHP và không có nhiều tính toán được sử dụng cho lề. Đệm làm cho nó khá dễ hiểu các kỹ thuật chỉ sử dụng