Bạn có thể tạo biểu đồ bằng html không?
Thử thay đổi các thuộc tính
7 và 9 trong các phần tử 6 để tạo biểu đồ thanh HTML với dữ liệu của bạn 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 Show Hướng dẫn lập biểu đồCó ba hướng dẫn để phát triển biểu đồ trên web
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 CSSCó 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
Chúng tôi sẽ hoàn toàn định vị nội dung văn bản của mỗi Để 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ư
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
Đ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ạo tự động vào từng phần tử 0, như vậy
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ử 0 để hỗ trợ tính dễ đọc khi so sánh các giá trị này với một 2
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
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ử 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ánhKhông phải lúc nào chúng ta cũng phải sử dụng
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 6, vì các tài liệu trên MDN nói rằng
Điều đó có ý nghĩa với tôi hơn là một yếu tố 7 đơn giản. Nhưng dù sao đi nữa, đây là giao diện khi không có CSSDự 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ử 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 CSSLea 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 đề xuất 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 9Mộ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ợ 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-TricksDự phòng nhúng CodePen Các vấn đề khi tạo biểu đồ bằng CSS
kết thúcCá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 Làm cách nào để tạo biểu đồ HTML?Những thứ bạn cần . Trình soạn thảo văn bản hoặc HTML. Bạn chọn đi; jQuery. Thực hành viết kịch bản an toàn và nhận kịch bản mới nhất. . Có thể là một trình chỉnh sửa hình ảnh, chẳng hạn như Paint, để mô phỏng biểu đồ của bạn trông như thế nào Một trình duyệt Web hiện đại và phù hợp để xem trước các thay đổi HTML có thể tạo biểu đồ hình tròn không?Bạn có thể tạo Biểu đồ hình tròn trong HTML bằng hàm CSS đơn giản có tên là conic-gradient . Đầu tiên, chúng tôi thêm phần tử
Bạn có thể tạo biểu đồ bằng JavaScript không?JSCharting là thư viện biểu đồ JavaScript có thể vẽ nhiều loại biểu đồ khác nhau bằng SVG . Nó rất dễ sử dụng và bắt đầu sử dụng, vì vậy nó rất phù hợp với hướng dẫn này. |