13
Làm cách nào để tạo biểu đồ hình tròn bằng CSS giống như bên dưới?Làm thế nào để tạo biểu đồ hình tròn trong CSS
A
Trả lời
11
Oh my! Bạn đã xem Công cụ biểu đồ của Google chưa?
https://google-developers.appspot.com/chart/interactive/docs/gallery/piechart
Đây là ngu ngốc dễ thực hiện, nhưng vấn đề của tôi với nó là "api bên ngoài" phần. Nếu google quyết định có thể điều này hoặc google đi xuống, bye bye chart! Nhưng theo như vẻ đẹp và sự lựa chọn của các biểu đồ khác, biểu đồ google là kinda một tìm thấy mát mẻ.
+0
Tôi tin rằng bạn có thể tải xuống API google.visualization từ [Tham khảo API Google Visualization] (https://developers.google.com/chart/interactive/docs/reference), tuy nhiên điều khoản dịch vụ không cho phép bạn tải xuống và lưu hoặc lưu trữ google.load hoặc google. mã trực quan. –
0
Theo như tôi biết điều này là không (chưa) có thể với css3. Tuy nhiên, phần tử html5 canvas mới cung cấp mọi thứ bạn muốn. Nó có thể dễ dàng được truy cập và sử dụng qua javascript. Một hướng dẫn nhỏ về cách sử dụng cơ bản có thể được tìm thấy here.
Một câu hỏi khác về stackoverflow ngay cả trên cùng một chủ đề. Xem "HTML5 Canvas pie chart". (Có "Graphing Data in the HTML5 Canvas Element Part IV Simple Pie Charts" trong câu trả lời đầu tiên cho một hướng dẫn về biểu đồ hình tròn bằng cách sử dụng các phần tử canvas)
0
Tôi đang tìm cách để xây dựng các bánh nướng này, thông qua CSS thuần túy hoặc thậm chí sử dụng một số Javascript. Hôm nay tôi tìm thấy một bài viết trên SmashingMagazine trỏ đến một talk from Lea Verou nơi cô ấy hoàn toàn móng tay chủ đề. Nó thực sự, thực sự đáng xem!
Các vấn đề liên quan
- 1. Tạo biểu đồ hình tròn đồ họa trong C#
- 2. làm thế nào để làm cho google Biểu đồ hình tròn nền api transperent
- 3. Biểu đồ hình tròn/Đa cấp
- 4. Làm thế nào để giảm kích thước của Biểu đồ hình tròn KendoUI?
- 5. HTML5 Canvas biểu đồ hình tròn
- 6. Làm cách nào để vẽ biểu đồ hình tròn theo cách thủ công trong Android?
- 7. Làm cách nào để tạo nền tròn bằng css?
- 8. Không gian ra khỏi biểu đồ hình tròn trong d3?
- 9. Cách hiển thị biểu đồ hình tròn trong android
- 10. Làm thế nào để tạo hình ảnh với các góc tròn trong C#?
- 11. Làm thế nào để tạo biểu đồ "inkblot" với R?
- 12. Ẩn nhãn trong biểu đồ hình tròn (Biểu đồ MS cho .Net)
- 13. CSS/JS để cắt xén hình tròn
- 14. Cách chọn màu cho biểu đồ hình tròn?
- 15. số hiển thị trên biểu đồ hình tròn
- 16. Làm thế nào để tạo nền div div/góc tròn?
- 17. Làm cách nào để tạo biểu đồ trong ASP.NET MVC3?
- 18. Làm thế nào để có được hình tròn trong Android
- 19. Biểu đồ hình tròn biểu đồ ASP.Net MS: loại bỏ lớp đệm không mong muốn
- 20. Làm thế nào để tô màu các biểu đồ hình tròn của giao diện người dùng Telerik Kendo?
- 21. highcharts: biểu đồ hình tròn - giảm số lượng lát
- 22. làm thế nào để tạo kiểu cho một vòng tròn Fontawesome biểu tượng nền?
- 23. Có thể tạo biểu đồ hình tròn với tính nhất quán của đối tượng không?
- 24. Làm thế nào để tạo các góc hình chữ nhật tròn trên (hoặc dưới) trong Silverlight?
- 25. Làm cách nào để tạo biểu đồ thanh "lồng nhau"?
- 26. Làm thế nào để cập nhật biểu đồ trong androidplot
- 27. Cách hiển thị giá trị trong khu vực biểu đồ hình tròn
- 28. SVG - Làm thế nào để cắt ảnh thành hình tròn?
- 29. Tạo biểu đồ SVG trong JavaScript
- 30. Làm thế nào để tạo biểu đồ thanh dọc bị hỏng trong matpltolib?
FYI: biểu đồ vòng kết nối của bạn' được gọi là biểu đồ hình tròn ** **: o) – balexandre
1. http://www.htmldrive.net/items/show/751/Pure-CSS3-Pie-Charts-effect 2. http://atomicnoggin.ca/blog/2010/02/20/pure-css3-pie-charts/ 3. http://elisabethrobson.com/?p=867 (** sử dụng HTML5 Canvas **) 4 bạn cũng có thể sử dụng HTML5 và jQuery, [LINK] (http://www.elated.com/articles/snazzy-animated-pie-chart-html5-jquery/) –