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

Bootstrap2系

概要

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

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

導入見送り … 円グラフ系

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

jQuery Visualize


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


jQuery jqPlot


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


Flotr


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


CSS Pie Timer


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


JS Charts


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


導入検討 … 円グラフ系

 閲覧数:1,269 投稿日: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


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

今後の方向性を決定

 閲覧数:675 投稿日: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デザイン」✕「円グラフ」解析



週間人気ページランキング / 9-29 → 10-5
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 19
2 鉄道会社毎のカラーコード | カラーコード(色) 16
3 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 14
4 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 7
4 「東京都」のカラーコード取得は難しい | カラーコード(色) 7
4 RGBの種類 / ビットカラー | RGB(色) 7
5 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 6
5 「overflow」効果を打ち消すスタイルシートは、「overflow: auto;」 6
5 FontAwesomeでアイコンが□(四角)になって表示されない Forbidden  | Font Awesome(フォント) 6
6 max-width: 100%の効果を打ち消すには、max-width: none; | CSS 5
6 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 5
6 「bgcolor」「background-color」「background」の違い | CSS 5
7 黒体 / 色温度 / D65(6500K)/ D50(5000K)/ K | 色 4
7 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 4
8 aタグで複数のブロック要素を囲むやり方 | CSS 3
8 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 3
9 「コズミックブルー」は、くすんだ青系全般の色を指す用語だと思います。 | カラーコード(色) 2
9 Design 0 2
9 キャラクター無料作成ジェネレーター / FLASH / オンラインサービス | イラスト参考(デザイン) 2
9 16進数カラーコード / 2進数 2
2024/10/6 1:01 更新