Canvasでドーナツ型チャートに特化したjQueryプラグイン作った
ドーナツ型チャートに特化したjQueryプラグインを試しに組んでみました。
Chart.jsのソースを大いに参考にさせてもらいました。
(Chart.jsは読みやすくてお勧めです)
・初期段階でドーナツ状のグラフが通るレールを予め描画するようにした。
・色つきグラフ部分は初めopacity=0で、ラジアンが2π(終点)に近づくに従ってopacity=1になるようにした。
・shadowなど細かいデザインの作りこみが出来るようにした。
・中心にアニメーションするテキストを出すようにした。テキストを出すロジックはまだ微妙。
・各色のlabelはhtml+cssで出す事前提のスクリプトです。
Chart.js(MIT License)
http://www.chartjs.org/
※各項目の所に出すlabelはhtml+cssだけで作るのが現実的だけど、
せっかくだからマウスオーバーで出すとかしたい・・・
でもcanvasでは色々と面倒なので、
何かこれ自体SVGで書いちゃった方がいい気がしてきた。
ということで次回はSVGで書きだすバージョンを検討中。。。
#追記:SVGバージョン書きました。
http://me.hateblo.jp/entry/2013/11/27/215543