CSS

アニメーションする円グラフをCSSで作るには

アニメーション円グラフ

CSSだけで、アニメーション表示する半円のグラフを作る方法をご紹介します。

WPのテーマを変更したら、うまく動かなくなったので、上記の円グラフはアニメーションGIFでごまかしてます。デモページを用意したのでこちらでご確認ください。

さて、作り方ですが、まずはHTMLの記述です。下記のようにリストで表示し、spanタグで囲っておきます。

次に、グラフの元になるデータは下記の表にある通りです。ただし、パーセンテージは適当に入れたものなので、本当のデータじゃありません。

パーセンテージから円グラフに表示する角度を計算しておきます。数式は「割合 ÷ 100 × 180」で、それぞれのデータ分を算出しておきます。180で割るのは半円のグラフだからで、もし円グラフなら360で割ることになります。

年代 割合 角度を求める計算
20代 37% 37/100*180=66.6
30代 28% 28/100*180=50.4
40代 22% 22/100*180=39.6
50代 13% 13/100*180=23.4

CSSの記述は以下の通りです。

Related posts

CSSでまるでタイピングしているように文字を表示する方法

ItSpaceBiz

CSSでスライドして比較できるビフォー・アフター写真を作る

ItSpaceBiz

アニメーションするソナー効果をCSSで作る方法

ItSpaceBiz