Chart.js 2.0の沼。X軸にマウス乗っけて表示したいの巻
昨日はタブの切替も出来たし、今日はサクサク進めれるのではないでしょうか。
後日談：進めれませんでした。
【課題メモ】
日時・月次・年次でデータを表示するボタンの用意
X軸の表示数を減らす処理
これらは、まぁ後日対応しよう。
今は進めていくのが先決。
あ、その前に１点気になるので、これだけしておきたい。
Chart.jsで値をそのまま入れると、天辺が一番上になるので、良い感じに＋の値を入れて表示したい。
そして、０をベースとしていたが、Googleで株価とかみると、そうでもなかった。良い感じに最低値と最大値を追加したいな。
１．最大値・最低値を取得
２．最大値と最低値に良い感じの値を追加して、表示
こう出来たら良いのか。
良い感じの値って・・・
マウスオーバーした時に、値を表示してほしい。
なんて質問したら良いのか。
vartical line でもないんだよな。
いや、そうなんだけどさ・・・
jsiddle chart.js というキーワードは、デモが見れて良いな。
これは今後使えそう。
ううーむ、さらっと、しれっと表示しているけど、未だにわからず。
沼だ・・・・沼にハマった。
一度今あるのを諦めて、jsiddle chart.jsで検索したよいサンプルを表示するところから始めてみよう。。
getContext("2d")
これがすごく怪しいんだよな。。
ちゃんと英語を読んでみると、1.0と2.0で書き方が変わっているやん。。
バージョン確認したら、chart.js は2.5だった。
2.0系の書き方になおさな。。
あった！！
1.0では標準装備なのが、2.0だと無いみたい。
それどうしたら良いのという質問。
この質問探すのに約3時間・・・トホホ。
based on cursors x position
というのがキーワードで必要だったんだな。。
ちなみに、俺が検索したのは
chart.js 2.0 hover option
Googleさんが理解してくれて大助かり。
表示はされたけど・・・表示されない！
くそぉ。
き・・・きたー！！
これですよ、これ。
求めていたのは。
X軸にマウスを乗っけて、値が表示されるもの。
コードコピペマシーンの俺にとって、神現る。
よし、これを調整しよう・・・
ひとまず、昨日の状態までに戻したい。
これ、レスポンシブも対応している。素晴らしね。
不要なのを削除して、見やすく設定をしよう。
ツールチップの編集をしたいな。
Chart.jsにめちゃ時間かけているけど今は仕方がない。
うん、公式ドキュメント見てもわからず・・・
ここの、callバックの部分を追加したら、追加できた。
ついでにタイトルも表示されなくなったので、All OK！
昨日簡単に追加できたら、ラインチャートを結局4時間かけて、作り直し的な。
一度Git push push!
・・・最大値を取得して、それをいい感じに＋とマイナスをつけるっていうのをするんだった。
まず、これを利用して、最大・最小値を取得しますか！
端数を切り上げしたい。
ん、小数点の切り捨てか。
1.11は1に
でも100単位にしたい場合は。
1450 → 1400
1450 / 100 = 14.5
にして、切り捨てした後に*100したらよいのか。
500単位にしたい場合ってどうなるんかな。
1450を1000と450に分ける。
450を/100して、四捨五入。この場合だと 0.45になるので、0になる。
その結果に＋500したらよいか。
1850でも、 0.85 = 1 になって、＋500すると、あれれ。
１なら、＋１０００
０なら、＋５００
という条件分を設ければよいな。
うん、なんかうまくいかないので、一回やめよう。
今日はこれにて。
