第4回。ギャップグラフ完成！ やった！ サンプルはスペインGP のデータだけど、セーフティ・カーが出なかったので、序盤に放り込んだ。
操作方法
- X, Y軸上のマウスホイールで、拡大/縮小
- プロットエリアと軸上でドラッグするとパン
- Top 3, 6, 10 のプリセットは、ctrl を押しながらクリックで反転
感想
前回 input タグで実装した横軸（ラップ）の拡大機能は、マウスで実装できたので没。でも横軸のパン動作が上手くいかず、非常に苦労した。諦めかけたけど、Chart.js のドキュメントをじっくり見直して、X軸の定義をカテゴリにしたら少し改善し、ならばとY軸と同じ線形座標としてキッチリ定義したら、上手く動作した。これはプラグインの挙動だと思うので、試行錯誤しないと辿り着けなかったと思う。
スマホでも動くはずだけど、自分の iPhone でさえ、まだ確認してません。タブレットならともかく、スマホは画面が小さすぎるので、まあ、見捨ててもいいかなと思っている。タブレットは持ってないから...
参考にしたサイト
