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