読者です 読者をやめる 読者になる 読者になる

with the flow

WEBプログラマを目指すWEBデザイナーが書き綴る開発日誌のようなもの

Canvasでドーナツ型チャートに特化したjQueryプラグイン作った

jQuery Java Script html5 Canvas

ドーナツ型チャートに特化した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