JavaScriptで作られたきれいなパイチャート（ドーナッツチャート）です。このページを表示すると、時計回りにチャートを描いていきます。形状のカスタマイズも可能で、チャートの下側の「Inner radius」の値を小さくすると普通のパイチャートに近くなります。「Outer radius」の値を小さくすると全体が小さくなります。また、「Outer radius」の値は100までですが、直接入力で100よりも大きくすることもできます。その場合は円ではなくなっていきます。

 

 

サンプルのhtmlソース

<div class="wrapper">
	<div id="root"></div>
</div>

サンプルのCSSソース

.wrapper {
	width:600px;
	margin:10px auto;
	height:550px;
	padding: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-image: linear-gradient(-225deg, #FFE29F 0%, #FFA99F 48%, #FF719A 100%);
	background-color: #252537;
	}
#root {
	max-width: 300px;
	margin: 1em;
	}
.helper-container {
	margin-top: .75em;
	color: rgba(255, 255, 255, .5);
	text-align: center;
	}
#root span {
	display: block;
	}