Forked from: hirotweets's Canvasでアニメーションするチャート View Diff (262)

Fork
6
Fav
7
View
12157
  • Play

Fullscreen

Smart Phone

Fork tree

  • Readme
  • JavaScript 253 lines
  • HTML 3 lines
  • SCSS / Compass 86 lines
0.2版として、canvasではなくSVGでアニメーションするドーナツチャートを作ってみた。
前バージョンとは違って、マウスオーバーするとTooltipが出て数字がわかるようになりました。

SVGで円弧を描くのはなかなか大変。。。
アンカーポイントの位置を一点ずつ計算して指定してあげないといけないので。
canvasはある程度よろしくやってくれるところがあったんだけど。。。

そのかわり、mouseenter, mousemoveなどの標準のイベントを監視できるように!
なので、マウスオーバー監視してグラフの値を出すTooltipをつけました。

SVGでやってみて、やっぱりインタラクティブなものはSVGのほうが有利だと実感。
DOMの中にちゃんとパスごとのエレメントが作成されるので操作出来るしなによりデバッグが楽。
CSSである程度装飾も可能だし(box-shadowが使えないのは残念)。
あと、スマホ、タブレットで拡大しても輪郭がきれい。
canvasだとひと手間加えないといけないし、結局は画像なので細かい部分の小回りが利きにくい。
加工しやすく扱いやすいので好きなんですけどね。Canvas。

まだまだ作成途上だけどもいったん公開。

一応解説記事書いた。
http://me.hateblo.jp/entry/2013/11/27/215543
  • SVGでアニメーションするチャート,ツールチップ付き
  • jQuery v2.0.3
  • SVGでアニメーションするチャート,ツールチップ付き

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