Vẽ pie chart, donut chart dùng CSS

Vẽ pie chart, donut chart dùng CSS

Có nhiều cách để vẽ các biểu đồ trên nền web, như sử dụng HTML5 Canvas, hay các thư viện Javascript như Google Charts, d3js,… Bài viết này hướng đến một giải pháp “nhẹ nhàng” hơn là chỉ dùng HTML, CSS đối với hai loại biểu đồ pie chart và donut chart, trong những trường hợp đơn giản.

Yêu cầu

CSS cơ bản (hiểu được CSS position)

Vẽ hình quạt

Pie chart được ghép thành từ các hình quạt. Ta sẽ bắt đầu bằng việc vẽ các hình quạt này. Có nhiều cách nhưng dưới đây là cách làm của tôi để vẽ hình quạt có góc < 180deg (đối với hình quạt có góc > 180deg ta ghép hình bán nguyệt với một hình quạt có góc < 180deg). Tư tưởng là vẽ hình bán nguyệt (là hình quạt góc = 180deg) rồi "cắt bỏ" một phần để thu được hình quạt. Minh họa như hình dưới đây:

pie1

Đầu tiên ta viết mã như sau:

<div class="sector">
	<div class="wrapper">
		<div class="inner">inner</div>
	</div>
</div>
.sector {
	width: 100px; height: 200px;	// bán kính 100px
	overflow: visible;
	border: 1px dotted #d0d0d0;
}		
.sector .wrapper {			
	position: relative;			
	z-index:999;
}
.sector .wrapper .inner {	
	width: 100px; height: 200px;	
	border-radius:  0 100% 100% 0 / 0 50% 50% 0;
	background: #67c2ff;
	position: absolute;  top: 0; right: -100px;     right = - (bán kính)
}			

.inner là hình bán nguyệt màu xanh, ta vẽ nó bằng cách đặt border-radius: 0 100% 100% 0 / 0 50% 50% 0;, và đưa nó ra ngoài .wrapper bằng cách sử dụng position. Ta được như sau:

pie2

Tiếp tục, ta xoay .inner một góc bằng góc của hình quạt định vẽ (ở đây là 30deg):

.sector .wrapper .inner {
	...
	-webkit-transform: rotate(-30deg);
	transform: rotate(-30deg);
}

pie3

Tuy nhiên do phép rotate của CSS3 là xoay quanh tâm của đối tượng nên ta phải dịch lại .inner sao cho điểm M’ trùng với M (như hình vẽ). Khoảng dịch theo trục tung delta(y) = M’H = r/2*sin(30), trục hoành delta(x) = MH = r/2*[1-cos(30)] (với r là bán kính của hình quạt). Đối với trường hợp này ta tính toán ra được delta(y) = 25px, delta(x) = 6.7px.
Kết hợp với các giá trị của top, right ở trên ta được:

.sector .wrapper .inner {	
	...
	top: -25px;
	right: -93.3px;
}

Sau đó chỉnh overflow của .sector để ẩn phần nằm ngoài .wrapper đi, ta được hình quạt hoàn chỉnh

.sector {
	...
	overflow: hidden;
}

Kết hợp các hình quạt thành pie chart

Vẽ lần lượt từng phần của pie chart theo cách trên rồi ghép chúng lại, sử dụng positiontransform tương tự theo cách trên.

pie4

Bạn có thể xem demo và code tại đây

Khi trích dẫn bài viết từ tek.eten.vn, xin vui lòng ghi rõ nguồn. Chúng tôi sẽ rất cảm ơn bạn!