グラフ1
所見

アニメーションとグラフとモーダル

2019年11月14日

※補足情報は日付(黄色)をタップ

1

autumnrain on and off

「11/ 2から11/ 7」を対象にした棒グラフでアニメーションとモーダルウィンドウを付加したインタラクティブ思考のグラフ。

「11/ 8から11/13」を対象にした棒グラフで棒グラフにオンマウスすると色が変わる。

「全期間」を対象にした棒グラフでグラフ対象を羅列するにはこの方法が良い。

PC用では横5列に配置した商品リスト。モバイルでは操作上の観点から1列表示がベストだろう。

Grid Layoutを使って2カラムレイアウトを差し込んでみた。

Grid Layoutで複雑なレイアウトを実行してみよう。ここでは文字と文字を重ねてデザインしてみた。


slick.js とアニメーション・グラフ

2019年9月14日

グラフのアニメーションの例

もしグラフをアニメーションにしなければ、グラフを画像化した方がずっと楽である。何故ならば、レスポンシブ対応についてちょちょいのちょいとは行かないのである。これは実際に弄ってみないことにはお分かりいただけないだろう。バランスを取って美しく配置するには、これまで蓄えたCSS3の知識を総動員しなければならない事態に陥る。

制作にあたって、まずこういう種類のいくつかのグラフを弄ってみた。その中で秀逸なグラフの大概がJavaScriptを力ずくで作り込んだものである。それを更にカスタマイズするとなると当方としては少々知識が覚束ない。

初めにこういう種類のアニメーション・グラフを作ってみた。棒グラフの数を気にしないで羅列する場合はこの方法が良いだろう。次にサイドにリンクがある「1・2・3」を作ってみた。これは一週間の6日間を横に並べて表示する、棒グラフが縦方向に伸びるタイプだ。モバイルでは狭い幅に縦方向の棒グラフを押し込むことになるので、タップ操作を考慮すると6日間ぐらいが丁度良い塩梅だ。だが、実際に作り込んでいったのは最初のグラフを発展させたものであり一番良い出来栄えになってしまった。上のリンクは終局的に作り込んだ結果である。要件はグラフのアニメーション化、オンマウスで対象の棒グラフの色を変えること、そしてクリック(タップ)すると補足情報をモーダルウィンドウで開けるようにすること、以上の三点だ。

PCのオンマウスの操作はモバイルではロングタップで再現できる。モバイルでは特定のグラフをロングタップしてテキストを表示させ、 が表示されているグラフをタップするとモーダルウィンドウが開くように作られている。

slick.jsへのグラフの組み込み

slick.jsの複数のスライドにグラフを割り当ててみたが、アニメーションが作動したのは最初のスライドのみであった。仕方が無いので、サイドにリンクを配置して個別のslick.jsのページで対応させている。

「11/ 2から11/ 7」を対象にした棒グラフでアニメーションとモーダルウィンドウを付加したインタラクティブ思考のグラフ。

「11/ 8から11/13」を対象にした棒グラフで棒グラフにオンマウスすると色が変わる。

「全期間」を対象にした棒グラフでグラフ対象を羅列するにはこの方法が良い。

PC用では横5列に配置した商品リスト。モバイルでは操作上の観点から1列表示がベストだろう。