こんな感じで円グラフを表示する方法です。
http://www.cdc.gov/dhdsp/data_statistics/ems/fs_ems_mt.htm
作ってみて、とりあえず楽にカスタムできそうなやつが出来たのでコードをおいておきます。
結果としてはこんな感じ
jVectorMap and Raphaël - CodePen
Raphaëlは初めて使いましたがこれはいいですね、いじってて楽しいのでもう少し触ってみようかと思います。
コードなどは私のCodePenにあります。
今回は単純にこうできる、という紹介ですのであまりそれっぽくないですが...
外枠を太くしたり、といったことがg.Raphaelのpiechartに見た感じなさそうだったので大きさの同じcircleを作成してそれをアニメーションさせています。
あと、gridは座標が分かりやすいようつけているだけです。
使用ライブラリ, Version等
- jQuery JavaScript Library v1.10.2
- jVectorMap version 2.0.0
- Raphaël 2.1.2
- g.Raphael 0.51
- g.pie.js