前回でギャップグラフは完成したので、今回はラップタイムチャートに挑戦。ついでに忘れていたリセットボタンも実装しようとしたけど、どうも動作が不安定なので、やめた。スクロールボタンをぐりぐりやってたら元に戻るからね。
操作方法
- X軸上のマウスホイールで、拡大/縮小（Y軸は今のところ固定）
- プロットエリアと軸上でドラッグするとパン
- Top 3, 6, 10 のプリセットは、ctrl を押しながらクリックで反転
感想
今回取り組んだのはツールチップ。周回数とドライバー、ラップタイムが表示されるようにした。Chart.js の Callback が難解というか、一部のコールバックで TooltipItem が配列で渡ってくる理由が分からず、苦戦。length = 1 だし、最初はドキュメントの誤りと思って時間を浪費してしまった...。結果的には狙い通りの実装ができて良かったけどね。
後は、ラップタイムチャートなんだから、軸のラベルも m:ss.0 表示にした。
ラップタイムチャートこそ、スペインGP のように多くのピットストップがおこなわれたレースでは、絞り込みと拡大表示が必要だと思っていたのだが、Y軸（ラップタイム）は不要と判断した。ファステストタイムの115%程度の幅が適正と考えている。けど、ウェットコンディションがあったら、ダメだろうな。日曜日のモンテカルロは雨？ えええ...。仕方がないから、次はダンプコンディションだったイモラをサンプルに取り上げて、最終回としましょうか。
参考にしたサイト
