CORDEA blog

Android applications engineer

【JavaScript】地図上の任意の位置に円グラフを表示する

こんな感じで円グラフを表示する方法です。

http://www.cdc.gov/dhdsp/data_statistics/ems/images/mt_pers_type.jpg

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等