chart.jsテストでござる

harapeko_wktk

License: MIT License

Fork
0
Fav
0
View
4401
  • Play

Fullscreen

Smart Phone

  • Readme
  • JavaScript 28 lines
  • HTML 6 lines
  • CSS 15 lines

■chart.jsテストでござる

■先に参考URLのご紹介

chart.js公式

Chart.js http://www.chartjs.org/

chart.jsのドキュメント

Chart.js Documentation http://www.chartjs.org/docs/

レーダーチャートのoption周りの日本語はこことかいいかも

[JavaScript] Chart.js を使ってレーダーチャートを描画する - unlinked log http://log.noiretaya.com/240

その他で使えそうなグラフライブラリとか

Javascriptで扱えるカッコイイグラフのまとめ - Qiita http://qiita.com/puriketu99/items/1d271bd84ff9583aaa01

■簡単な説明をば

使い方

普通に読み込んで、設定を書くだけで使えます。

注意点1(点の数がちょいちょい変わる場合は位置がズレる)

もちろん値の所には変数も使えるので、動的な事もできます。 ただ、点の数によってグラフのサイズが変わるので、そこは注意が必要でした。

私の場合、2つのカテゴリでこのグラフを使いました。 ひとつは点が5個。もう片方は点が6個。

ページを遷移すると位置が目に見えてズレるのがお客さんに見つかってしまい(ノ∀`)アチャー

結局、片方のサイズを大きくしてグラフのサイズは一緒にしたのですが、 始まりの位置まで大きくなったので、cssのabsoluteで上下の位置を調整するという事が必要になりました。

注意点2(IE8対応以下に対応させる場合)

excanvas.jsが必要になります。

ただ、古いものでないとchart.jsが動かなかった記憶があります。 去年の事なのでちゃんと覚えていない(´・ω・`) もし、対応される場合はネット上のどこかから古いChart.jsの記事にあるexcanvas.jsのバージョンをもってくるといいかもしれません。 そして、手元にあるexcanvas.jsのバージョンがどこにも書かれていないのでわかりません。

いまは直っているのかもしれません。でも調べてません(´・ω・`)、、、

ちゃんと調べてないけどこれが原因なのかも? excanvas.jsとjQueryを組み合わせて使うときの注意点 http://blog.roundrop.jp/show/17

  • chart.jsテストでござる
  • jQuery v1.10.2
  • chart.jsテストでござる

play

Complete!

Description What kind of game?

Control Device

jsdo.it websocket controller

Mouse

keyboard

smartphone

Fullscreen

harapeko_wktk

Author

はらぺこですヾ(o゚ω゚o)ノ゙

職業:深淵魔術師 技能:糞コード大量難産 宝具:進捗遅延(オレハシヌ) 構え:天地大炎上の構え(ナカマモシヌ)

愛車はordina s5とRS8 EL。趣味はテニス、空手、自転車、web関係です。

【Qiita】: http://qiita.com/harapeko_wktk

Default Panel

Size

  • Width: px
  • Height: px

code

QR Code

Discussion

Questions on this code?

Tags