ページをリロードしないでタブの切替、Line Chart
ページをリロードしないでタブの切替をしたい!
まずここを見てみよう。
Allaboutって昔良く見ていたけど、最近色々な情報がありすぎて見なくなってきたなぁ・・・
うーん、なんか違う。
検索キーワードを変えてみよう。
いろいろな検索をして、「タブメニュー」というキーワードを発見。
タブメニューはスワイプ対応はしたいところではあるのだけど、他のページのデザインとの調整も兼ねて辞めておこう。
むしろスクロールダウンして、タブの部分だけくっついて来てくれたら良いな。
ページのスクロール位置を維持したままフォーム送信やページ切り替えができる jQuery プラグイン | CYOKODOG
これが近い!
うーむ、調べ物で約1時間程度かかっている。
そろそろ決めないとな。
なんか、どうでも良くなってきたな・・・
普通にタブの切替設定をつけるか。
さっきまで表示されていたのに、エラーが発生している。
うーむ、なぜ permission denied?
あれ・・・ブランチ変更したからか、内容が変更されている。。
masterブランチからマージしようとしたがエラー。
Atomを落とすとすんなり出来た。
原因は、ATOMお前だったのか・・・!
ひとまず、気を取り直して作業再開。
タブの表示等確認出来た。
さて、微調整していきますか。
これを元に作っていく。
タブの色を決める時に、カラーコードを確認。
ここからリンク辿っていくと良さそう。
さて、タブも完成した。
お次は、タブの中身と行きますか。
Chart.jsを導入しようではないか。
うん。一回トイレ。
Chart.jsのGemがあるのは嬉しいなぁ。
GitHub - coderbydesign/chart-js-rails: Chart.js for Rails Asset Pipeline
ふぉぉぉ。一発で表示された!
珍しすぎる。
ひとまず、サイズが大きすぎて叶わないので、調整。
ふぉぉぉ!また成功・・・!
これは、、、あとで詰まるパターンだな。
よし、勢いにのって、設定しよう。
Line Chartを作りたいので、
を参考に進めていきましょう。
うん、適当にコピペして動かすのはだめですな。。
ちゃんと理解しよう。ううう。
お、ようやく表示された。
色々と設定をいじりたい。
あと、Y軸も0をベースにしたい。
オプションを追加して最低値を設定した。
1週間、1ヶ月、3ヶ月のチャートを表示出来るようにしたいな・・・
今日は、ラインの色とか調整して終わるか。
軸のラベルを飛び飛びにする方法は、まだ試していない。
明日試す。
色はここから、利用するとよいな。
まとまっておいてるから、安定した色合いになる。
よし、Line chartの導入が完了した。
プッシュして終わろう。
なかなか良く進んできたんじゃないかな。