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

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

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

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

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

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

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