<figure class="pie-chart">
	<h2>テストです</h2>
	<figcaption>
		リゾート地 38<span style="color:#26bad9"></span><br>
		アフリカ 5<span style="color:#864709"></span><br>
		北米 13<span style="color:#f02227"></span><br>
		中南米 10<span style="color:#f4e739"></span><br>
		アジア 21<span style="color:#58c218"></span><br>
		ヨーロッパ 28<span style="color:#4157f5"></span>
	</figcaption>
	<cite>データソース:ほげほげ</cite>
</figure>
.pie-chart {
	background: radial-gradient(circle closest-side, transparent 68%, white 0),
		conic-gradient(
			from 64deg,
			#26bad9 0,
			#26bad9 33%,
			#864709 0,
			#864709 37.3%,
			#f02227 0,
			#f02227 48.6%,
			#f4e739 0,
			#f4e739 57.3%,
			#58c218 0,
			#58c218 75.6%,
			#4157f5 0,
			#4157f5 99.9%
		);
	position: relative;
	width: 500px;
	min-height: 350px;
	margin: 0;
	outline: 1px solid #ccc;
}
.pie-chart h2 {
	position: absolute;
	margin: 1rem;
}
.pie-chart cite {
	position: absolute;
	bottom: 0;
	font-size: 80%;
	padding: 1rem;
	color: gray;
}
.pie-chart figcaption {
	position: absolute;
	bottom: 1em;
	right: 1em;
	font-size: smaller;
	text-align: right;
}
.pie-chart span:after {
	display: inline-block;
	content: "";
	width: 0.8em;
	height: 0.8em;
	margin-left: 0.4em;
	height: 0.8em;
	border-radius: 0.2em;
	background: currentColor;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.