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の記述は以下の通りです。