conic-gradient で pie-chart をつくってみよう

2019年10月5日

この記事は約 3 分で読めます。

pure css で
円グラフを作成できることをご存知ですか！
conic-gradient を使って実現してみましょう。

conic-gradient() は CSS の関数で、中心から広がるのではなく、
中心点の周りを回りながら色が変化する
放射グラデーションから成る画像を生成します。
なぜ “conical" (円錐の) グラデーションと呼ばれるのか。
色経由点が一方よりもう一方が明るい場合、
上から見た円錐のように見えるからです。
conic-gradient() – CSS: Cascading Style Sheets | MDN

それでは
結果を見てみましょう。

とんかつの1切れ目は
どこから食べればおいしいのか、
ある料理人は
とんかつを上から見たときに幅の広い「肉側」の2～3番目が火入れの状態が一番ちょうどいい
といいます。
あなたは1切れ目、どこを選びますか？

57.6% 端から

29.4% 真ん中から

13.1% 気にしない

　とんかつの1切れ目、どこから食べる？
　　　　– Yahoo!ニュース意識調査

こんな感じの円グラフが、
簡単に作れます。
以下が HTML と CSS になります。

<div class="container">
  <div class="pie-chart">
  </div>
</div>

.pie-chart {
  width: 340px;
  height: 340px;
  background: conic-gradient(#8b22ff 0% 25%, #ffc33b 25% 56%, #21f3d6 56% 100%);
  border-radius: 50%;
}
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

conic-gradientの Browser サポートは、
Chrome と Safari、Android系と
少ないですが
CSS conic-gradient() polyfill を使えば、
サポートしていない Browserでも
CSS 円錐形グラデーションを作れます。