概要
状態:調査中
閲覧数:15,462
投稿日:2013-06-13
更新日:2013-06-13
・Bootstrapで「いい感じにデザインされた表」を探すも全然見つからない
・下記2ページを参考にするも、分からない。複雑すぎて
・Perfectum Dashboard - Perfect Bootstrap Admin Template
・AdminFlare - Dashboard
・コードスニペットと言うか、欲しいのは表部分だけ
・ソース見たけど、片方のCSSは「@import url」しまくりだし、もう一方はアニメーション部分を特定できない
・時間かければいけるのかもしれないけど、そこまでするのもなァー
・やっぱ大人しく、自分で作成するしかないのか
・両サイトとも、円グラフ部分は「class="row-fluid」の中で「<div class="span2 pie-chart">」やってるだけ
・円グラフ自体は、Bootstrapとは関係ないのかしら？
・「.インストール」でここら辺やったしたような気もしたけど、今確認してみたら、「進捗などを表現するためのプログレスバー」だった
・似てるけど、ちょっと違うんだよねー、やりたいことと
・下記2ページを参考にするも、分からない。複雑すぎて
・Perfectum Dashboard - Perfect Bootstrap Admin Template
・AdminFlare - Dashboard
・コードスニペットと言うか、欲しいのは表部分だけ
・ソース見たけど、片方のCSSは「@import url」しまくりだし、もう一方はアニメーション部分を特定できない
・時間かければいけるのかもしれないけど、そこまでするのもなァー
・やっぱ大人しく、自分で作成するしかないのか
・両サイトとも、円グラフ部分は「class="row-fluid」の中で「<div class="span2 pie-chart">」やってるだけ
・円グラフ自体は、Bootstrapとは関係ないのかしら？
・「.インストール」でここら辺やったしたような気もしたけど、今確認してみたら、「進捗などを表現するためのプログレスバー」だった
・似てるけど、ちょっと違うんだよねー、やりたいことと
導入見送り … 円グラフ系
jQuery Visualize
・デモ見る限り、アニメーション表示不可
jQuery jqPlot
・デモ見る限り、アニメーション表示不可
Flotr
HTML5のcanvas機能を使用してグラフが作成出来るライブラリ
・デモ見る限り、アニメーション表示不可
・「レーダーチャート」作成できるのはいいかも
CSS Pie Timer
・円グラフではない「アニメーションの円」
・CSSを利用してタイマーを実装
JS Charts
・「棒グラフ」「折れ線グラフ」はアニメーション対応しているが、「円グラフ」はアニメーション非対応
・見た目が綺麗
・「無料版」「有料版」がある。違いは不明
導入検討 … 円グラフ系
Google Chart Tools
・確かアニメーション表示は出来なかったような気がする
・円グラフ
・人口分布図
EASY PIE CHART
・アニメーション表示できる！
・アニメーションする際、数値も変化するのが面白い
・デモ
・円グラフしか作成不可
Chart.js
・キタコレ！
・大本命っぽい
・アニメーション対応。しかも動きがキュート
・対応しているグラフ種類が豊富。レーダーチャートにも対応
・GitHub
・公式ドキュメント
・オプション指定方法
・ブラウザに可視表示された瞬間にチャートを表示
・chart.jsのradarchartが少しおかしくて、手を加えたメモ
※最強かと思ったけど、折れ線グラフのアニメーションに関しては「RGraph」の方が動きがいいかも。「Chart.js」はただ単に下から上にアニメーション表示させてるだけ…
RGraph
HTML5 and JavaScript charts
・デザインがイマイチなので損している感は否めないが、他では見たことがないようなグラフが幾つもある
・アニメーションも数種種ある
・トップページに配置しているアニメーションがダサい(個人的にはどうしてそれをトップに持ってくるかな、という気がする。もっと普通にいい感じのもコンテンツ階層にはあるのに…)
アニメーションするメーターチャート
・90度バージョン
・スピードメータータイプ
・「アニメーションするメーターチャート」はここで初めて見たよ。「Chart.js」でも取り扱っていない
・デザインはアレだけど、そこは変更すれば良いでしょう
折れ線グラフ
・折れ線に沿ってちゃんと進んでいくので、アニメーション動作としては「Chart.js」より良い
アニメーションするガントチャート
・「ガントチャート」を「アニメーション」させる必要性を全く感じないが、他で見かけたことがないのでメモ
アニメーションするレーダーチャート
・折れ線グラフに沿ってアニメーションする
・アニメーション動作する「レーダーチャート」は「Chart.js」にもあるが、動作が異なる
・ノーマル「折れ線グラフ」とは異なり、この場合は、どちらが良いとかいうのはないと思われ。単純に好みの問題
放射状の散布図
・こういう図も作れるんだ、と思った
・統計分布図として利用できるかもしれない
・アニメーション非対応
ローズチャート
・「ローズチャート」って言葉自体、初めて知る
ローズチャートは円形のチャートで、Y値がそれぞれの扇形の半径を表し、その扇形を組み合わせて成り立っています
・統計分布図として利用できるかもしれない・アニメーション対応
jquery JavaScript InfoVis Toolkit
・Tree Animation風の可視化jquery JavaScript InfoVis Toolkitを試してみました
jQuery Knob
・昨日、散々探し倒したのに、まだ未知のスクリプトがあったわ
・しかも、デザイン的には最優レベル
・アニメーション対応
・カスタマイズ実装例（但し利用バージョンは最新ではないので注意が必要）
今後の方向性を決定
EASY PIE CHART
・現状のメイングラフアニメーションには「EASY PIE CHART」を採用
・調査している内、気がついたけど、厳密な意味での円グラフではないのね
・というか、円グラフにも色々あるのだが、このアニメーション表示は数字も回転するしスッキリしていて一番みやすい
・デザインは、こちらを適用予定
表系全体デザイン
・探したけど、良い感じなのが全然見つからない
・こちらを参考に自前で構築せざるを得ない
・その後、再度探してみたのだが、下記2つぐらいしか見つからない
・過去に自分がいいなと思っていたサイトも見てみたけど、サイト閉鎖してたり、今見たらそんなでもなかったり
・Highly customizable
・Dribbble - Snowbird Widget updates by Rally Interactive (via Ben Cline)
→自分なりのコードスニペット作成する必要があるかも
→Bootstrapベースの用途別コードスニペットコピペサービス！
引き続き調査継続
・その他については、引き続き調査継続
・上記「導入検討 … 円グラフ系」は全て実際に設置して試してみる予定
・「人口ピラミッド」スクリプトを探す
・d3
※イメージとしては、サービスリリース後の追加機能実装辺り。多分、間に合わないので…
今日の感想
・5：00→12：00
・これだけ調査するのに7時間費やした
・こんなに時間かかるとは思わなかった
・コードとか全然見ていないのに…
・ただ、まあ、何れいつかは調査しようと思っていたので、このタイミングで出来てむしろ良かったのかもしれない…