2年前に投稿

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

DISCLAIMER: This article is more than a year old and may not be current.

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

4

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 円錐形グラデーションを作れます。

ポリフィルとは、最近の機能をサポートしていない古いブラウザーで、
その機能を使えるようにするためのコードです。大抵はウェブ上の JavaScript です。

Polyfill (ポリフィル)
POINT

conic-gradients をよりよく理解するには、
MDNドキュメントを参照してください。

貴重なお時間を割き、
最後まで
ご高覧いただきまして
有難うございました
conic-gradient で pie-chart をつくってみよう

カスタマイズ - CSSCSS,polyfill

Posted by FOUR 4to6