ページをリロードしないでタブの切替、Line Chart

ページをリロードしないでタブの切替をしたい!

allabout.co.jp

まずここを見てみよう。

Allaboutって昔良く見ていたけど、最近色々な情報がありすぎて見なくなってきたなぁ・・・

 

うーん、なんか違う。

検索キーワードを変えてみよう。

いろいろな検索をして、「タブメニュー」というキーワードを発見。

 

タブメニューはスワイプ対応はしたいところではあるのだけど、他のページのデザインとの調整も兼ねて辞めておこう。

むしろスクロールダウンして、タブの部分だけくっついて来てくれたら良いな。

ページのスクロール位置を維持したままフォーム送信やページ切り替えができる jQuery プラグイン | CYOKODOG

 

これが近い!

うーむ、調べ物で約1時間程度かかっている。

そろそろ決めないとな。

なんか、どうでも良くなってきたな・・・

普通にタブの切替設定をつけるか。

 

さっきまで表示されていたのに、エラーが発生している。

うーむ、なぜ permission denied?

 

あれ・・・ブランチ変更したからか、内容が変更されている。。

masterブランチからマージしようとしたがエラー。

Atomを落とすとすんなり出来た。

原因は、ATOMお前だったのか・・・!

 

ひとまず、気を取り直して作業再開。

タブの表示等確認出来た。

 

さて、微調整していきますか。

 

fukafuka295.jp

これを元に作っていく。

タブの色を決める時に、カラーコードを確認。

blog.codecamp.jp

 

ここからリンク辿っていくと良さそう。

さて、タブも完成した。

お次は、タブの中身と行きますか。

 

Chart.jsを導入しようではないか。

うん。一回トイレ。

 

Chart.jsのGemがあるのは嬉しいなぁ。

GitHub - coderbydesign/chart-js-rails: Chart.js for Rails Asset Pipeline

 

ふぉぉぉ。一発で表示された!

珍しすぎる。

ひとまず、サイズが大きすぎて叶わないので、調整。

ふぉぉぉ!また成功・・・!

 

これは、、、あとで詰まるパターンだな。

よし、勢いにのって、設定しよう。

 

Line Chartを作りたいので、

Chart.js | Documentation

を参考に進めていきましょう。

 

うん、適当にコピペして動かすのはだめですな。。

ちゃんと理解しよう。ううう。

 

お、ようやく表示された。

 

色々と設定をいじりたい。

qiita.com

 

あと、Y軸も0をベースにしたい。

joppot.info

 

オプションを追加して最低値を設定した。

1週間、1ヶ月、3ヶ月のチャートを表示出来るようにしたいな・・・

 

今日は、ラインの色とか調整して終わるか。

軸のラベルを飛び飛びにする方法は、まだ試していない。

明日試す。

 

色はここから、利用するとよいな。

まとまっておいてるから、安定した色合いになる。

www.hp-stylelink.com

 

よし、Line chartの導入が完了した。

プッシュして終わろう。

 

なかなか良く進んできたんじゃないかな。