CSSのみで円グラフをつくる コピペで使えるHTML+CSS グラフ編

スポンサーリンク

CSSのみで円グラフを作ります

スポンサーリンク

HTML+CSSで円グラフを描く

円グラフの例

40%、30%、20%、10%の割合です。

コードの説明

HTML

<div class="chart"></div>

CSS

.chart {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(#ff0000 0% 40%, #00ff00 40% 70%, #0000ff 70% 90%, #ffff00 90% 100%);
}

仕組みの説明

200pxのdivを描き、border-radiusを50%として円の形にします。

backgroundをconic-gradientで指定します。

上から右に向かってbackgroundを指定します。

#ff0000 0% 40% #00ff00 40% 70% #0000ff 70% 90% #ffff00 90% 100%
40% 30% 20% 10%

もし、60%、30%、10%としたい場合は、

background: conic-gradient(#ff0000 0% 60%, #00ff00 60% 90%, #0000ff 90% 100%);

とします。

カラージェネレータ

RGB部分をクリックし、HEXを選択するとCSS用のカラーコードが表示されます。

円グラフ作成時の色設定にご利用ください。