「Bootstrapデザイン」✕「グラフ」

Bootstrap2系

概要

 状態:調査中  閲覧数:11,199  投稿日: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とは関係ないのかしら?

・「.インストール」でここら辺やったしたような気もしたけど、今確認してみたら、「進捗などを表現するためのプログレスバー」だった
・似てるけど、ちょっと違うんだよねー、やりたいことと

導入見送り … 円グラフ系

 閲覧数:438 投稿日:2013-06-13 更新日:2013-06-13 

jQuery Visualize


デモ見る限り、アニメーション表示不可


jQuery jqPlot


デモ見る限り、アニメーション表示不可


Flotr


HTML5のcanvas機能を使用してグラフが作成出来るライブラリ
デモ見る限り、アニメーション表示不可
「レーダーチャート」作成できるのはいいかも


CSS Pie Timer


・円グラフではない「アニメーションの円」
・CSSを利用してタイマーを実装


JS Charts


・「棒グラフ」「折れ線グラフ」はアニメーション対応しているが、「円グラフ」はアニメーション非対応
・見た目が綺麗
・「無料版」「有料版」がある。違いは不明


導入検討 … 円グラフ系

 閲覧数:902 投稿日:2013-06-13 更新日:2013-06-14 

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


・昨日、散々探し倒したのに、まだ未知のスクリプトがあったわ
・しかも、デザイン的には最優レベル
・アニメーション対応
カスタマイズ実装例(但し利用バージョンは最新ではないので注意が必要)

今後の方向性を決定

 閲覧数:333 投稿日:2013-06-13 更新日:2015-09-12 

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時間費やした
・こんなに時間かかるとは思わなかった
・コードとか全然見ていないのに…
・ただ、まあ、何れいつかは調査しようと思っていたので、このタイミングで出来てむしろ良かったのかもしれない…


「Bootstrap v2.3.1」不具合

「Bootstrapデザイン」✕「円グラフ」解析



週間人気ページランキング / 7-30 → 8-5
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 39
2 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 27
3 RGBの種類 / ビットカラー | RGB(色) 23
4 血の色 / #b30000 / #360800 / #ff0000 | 色 22
5 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 21
6 Design 0 17
7 HSLとHSVの違い | 色変換(色) 16
8 「属性」「プロパティ」「アトリビュート」の違い | CSS 13
9 HTML5では、「input 要素」「button 要素」を「フォームタグ」の外で直接記述しても良い | HTML5(HTML) 12
9 使用していないCSSをチェックする、標準的な方法を知りたい | CSS 12
9 コズミックブルーが何色か分からない | 色 12
10 「overflow」効果を打ち消すスタイルシートは、「overflow: auto;」 11
10 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 11
10 「bgcolor」「background-color」「background」の違い | CSS 11
10 アドベンチャーゲーム系の素材をどうやって用意するの? | イラスト素材(デザイン) 11
11 16進数カラーコード / 2進数 9
12 画面キャプチャ | Chrome 拡張機能(ブラウザ) 8
13 キャラクター無料作成ジェネレーター / FLASH / オンラインサービス | イラスト参考(デザイン) 7
13 「Bootstrapデザイン」✕「グラフ」 | 2系(Bootstrap) 7
13 「line-height」効果を打ち消すスタイルシートは、「line-height:normal; 7
2021/8/6 1:03 更新