Fork
4
Fav
11
View
11981
  • Play

Fullscreen

Smart Phone

Fork tree

  • Readme
  • JavaScript 195 lines
  • HTML 1 lines
  • CSS 16 lines
ドーナツ型チャートに特化した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バージョン作った。このコードをforkしたものの、ほとんど原型とどめてないw
http://jsdo.it/hirotweets/ybdA
  • Canvasでアニメーションするチャート
  • jQuery v2.0.3
  • Canvasでアニメーションするチャート

play

Complete!

Description What kind of game?

Control Device

jsdo.it websocket controller

Mouse

keyboard

smartphone

Fullscreen

hirotweets

Author

Default Panel

Size

  • Width: px
  • Height: px

code

QR Code

Discussion

Questions on this code?

Tags

Favorite by

Forked

sort by