基本的にCSS!超シンプルな円グラフの作り方を紹介します。

基本的にHTMLとCSSで実装しています。SVGは使っていません。

円グラフを複数個設置することも可能です。

また、レスポンシブ対応済みなので画面幅に合わせて表示させることも可能です。

一部、JavaScriptを使用していますが、グラフならば値が変更される事が殆どかと思いますので、入力された値の取得とグラフの角度の計算にJavaScriptを使用しました。

HTML

<div class="chart-box">
	<div class="simple-pie-chart" data-chart-val="34">
		<div class="chart-meter"></div>
		<div class="chart-value">
			<p><span class="percent-val"></span>%</p>
		</div>
	</div>
</div>

HTMLはこれだけ。超シンプル。
真ん中をくり抜いたドーナツ型じゃない場合は更にシンプルになります。

CSS

.chart-box{
	margin: 0 auto;
	max-width: 400px;
	min-width: 200px;
}

/* ここから円グラフ */
.simple-pie-chart{
	padding: 50%;
	border-radius: 50%;
	overflow: hidden;
	position: relative;
	background:linear-gradient(90deg,#e5e5e5 0%,#e5e5e5 50%,#ccff66 50%,#ccff66 100%);
}
.simple-pie-chart .chart-meter{
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	transform: rotate(0deg);
	padding-left: 50%;
	box-sizing: border-box;
	background: linear-gradient(90deg,transparent 0%,transparent 50%,#e5e5e5 50%,#e5e5e5 100%);
}
.simple-pie-chart .chart-meter.inversion{
	background: linear-gradient(90deg,#ccff66 0%,#ccff66 50%,transparent 50%,transparent 100%);
}
.simple-pie-chart .chart-value{
    content: "";
    position: absolute;
    border-radius: 50%;
    left: 25%;
    top: 25%;
    width: 50%;
    height: 50%;
    background: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 24px;
}

CSSは多少ありますが、基本的には円形要素の上に「position」で重ねていくスタイルです。
グラフの角度調整は「transform」で表現しています。

JavaScript

$(function(){
	// 円グラフを複数設置している場合を想定してクラス名「simple-pie-chart」の数だけ繰り返す
	$('.simple-pie-chart').each( function(){

		// 要素を回転させる角度を算出する( data-chart-valの値 * 360度/100% )
		var value = $(this).data('chart-val');
		var angle = value * 3.6;

		// 中心のテキストに「〇〇%」を表示させる
		$(this).find('.percent-val').append( value );

		// 180度より大きい場合は背景色を反転する
		if( angle > 180 ){
			$(this).find('.chart-meter').addClass('inversion');
		}
		// 算出した角度を要素に反映する
		$(this).find('.chart-meter').css('transform','rotate('+ angle +'deg)');
	});
});

コードを読みながらコメント見てもらえると分かると思います。

まとめ

今回作成した円グラフは、0%~100%になるまでの円グラフです。

100%から目減りしていく円グラフものちのち追加します。

コメント