SVGで円グラフを描くシンプルな方法

SVGで円グラフを描くシンプルな方法を思いついたのでシェアしておく。既に先人がいるかもしれないが、そんなに頑張ってチェックしてはいない。

例えばCSSのanimationと組み合わせればこんなグラフが描ける

See the Pen SVG PIE Chart with CSS animation by keisuke Takahashi (@ksksoft) on CodePen.

ポイントは以下の通り。

  • svgのcircleで扇形を描く
  • circleのfillはなく、太いstrokeで「塗り」に見せかける
  • 扇形の角度は破線の長さで調整する
  • jsは不要。

以上の説明だけではよくわからない人の為に、以下に順を追って解説する。

1.SVGで円を書く

インラインsvgの円はcircleタグで書けます。

<svg viewBox="0 0 200 200">
 <circle cx="100" cy="100" r="50"/>
</svg>

円の中心をcx,cy属性で、半径をrで指定します。単位を省略するとpxになります。

2.円の塗りを透明に、線に色をつける

fill属性で塗りを、stroke属性で線色を、stroke-width属性で線の太さを指定します。各属性をcssで指定することもできます。

<svg viewBox="0 0 200 200">
 <circle cx="100" cy="100" r="50"
  fill="rgba(0,0,0,0)"
  stroke="#c09"
  stroke-width="1"/>
</svg>

3.円の線を破線にする

stroke-dasharray属性で線を破線にします。奇数番目の数字が実線の長さ、偶数番目が隙間の長さです。

<svg viewBox="0 0 200 200">
 <circle cx="100" cy="100" r="50" fill="rgba(0,0,0,0)"
 stroke="#c09"
 stroke-width="1"
 stroke-dasharray="10,10"/>
</svg>

4.線の太さを半径の倍にする

svgの線の太さは、線の両側に均等に太ります。その為、stroke-width属性を半径の2倍まで太くしていくと、見かけ上は2倍の半径の円になります。このサンプルには、stroke-widthが0から半径の2倍になるまでのcss animationを指定して、変化が分かり易い様にしてあります。

<svg viewBox="0 0 200 200">
 <circle cx="100" cy="100" r="50" fill="rgba(0,0,0,0)"
 stroke="#c09"
 stroke-width="100"
 stroke-dasharray="10,10"/>
</svg>

5.破線の長さと隙間を調整して、扇形を作る

stroke-dasharray属性で破線をコントロールして、扇形を作ります。このサンプルには、stroke-dasharrayが 0,100 から 30,70 になるcss animationを指定して、変化が分かり易い様にしてあります。

<svg viewBox="0 0 63.6619772368 63.6619772368" class="sda-anime">
 <circle cx="31.8309886184" cy="31.8309886184"
 r="15.9154943092" fill="rgba(0,0,0,0)"
 stroke="#c09"
 stroke-width="31.8309886184"
 stroke-dashoffset="25"
 stroke-dasharray="30,70"/>
</svg>

円弧をパーセンテージで指定し易くする為に、以下の工夫をしてます。

  1. 円周が100pxになるように逆算し、半径(r)を15.9154943092にする
  2. 円の中心(cx,cy)は、半径の倍の31.8309886184にしておく
  3. svgのviewBoxは、見かけ上2倍になった円が収まる様に、半径(r)の4倍の大きさ”0 0 63.6619772368 63.6619772368″にする
  4. 扇型は時計で言うと3時の位置から描かれはじめる。円グラフにするなら、12時からの方が良いので、stroke-dashoffsetを25(1/4回転分)ずらす。
  5. svgの大きさをコントロールし易くする為に、svgをdiv等でラップして、ラッパーに幅を指定する。svg自体は、ラッパーの幅に応じて変わるようにpadding-bottom trickを使う。
  6. このように準備した上で、例えば30%の扇形を描きたいなら、 stroke-dasharray=”30,70″ とする。

解説は以上です。

途中でちらっと見えた、集中線の描画が気になった人へ。この手法で、SVGで簡単に集中線が描けます。例えばこんな感じ。-> SVG Concentrated Linework

カテゴリー: css3, svg タグ: パーマリンク

シェア

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください