技術資料

error この記事は最終更新日から1年以上が経過しています。

CSSで円グラフを実現する方法。

html

<div class="circle-graph">

</div>

css

.circle-graph{
	width:200px;
	height: 200px;
	border-radius:50%;
	background-image: conic-gradient(#ff0000 0deg 126deg, #F5820F 126deg 180deg, #F9DFC6 180deg 360deg);
}

background-image の conic-gradient() 内の値を増やせば、円グラフの項目は幾つでも増やせる。

最初の値は0degスタートで、値の割合(%) * 3.6 degまで。
※例えば35%だったら、35*3.6 = 126 で、 0deg 126deg となる。
　次の値は 126degスタートで + 値の割合(%) * 3.6 degまで。(以下略)

See the Pen CSSで円グラフ by nanaka (@nanaka_tokiwa) on CodePen.