コニファ・ロゴ

csstest:canvasとchart.jsを使って作るドーナツチャート

canvasをchart.jsで操作して作るきれいなドーナツチャートです。オリジナルよりも小さめにしています。

 

サンプル


91%

サンプルのhtmlソース

<div class="chart">
    <canvas id="myChart" width="220" height="220"></canvas>
    <p class="ttl">91%</p>
</div>

サンプルのCSSソース

.chart {
	position: relative;
	margin: 60px auto;
	width: 220px;
	height: 220px;
	}
p.ttl {
	position: absolute;
	top: 64px;
	left: 54px;
	font-size: 38px;
	color: #666;		
	}

 

 

 

戻るボタン