その1のタイトルと、ちょっと時制が違いますが、わざとです。
今回は以下を目標にやってみました。
- ドライバーごとの表示/非表示の実装
- chartjs-plugin-zoom の利用（パン／拡大／縮小）
- スマホでの確認（その1では問題なかった）
かなり時間を要してしまったので、拡大と縮小は次回へ持越し。それでも、いいのが出来たと思う！ かなり自分のやりたいことに近づいている。スマホは手元の iPhone でやってみたところ、一通り動いてる。Android でも確認したくなるが、気にし始めたら PC を含め、ブラウザと OS の組み合わせテストになるので、これでヨシとする。
ボタンの配置は、これは動的に生成しようかと思ったけど、よく考えると誰得？みたいな感じだったので見送り。ドライバーの変更なんて、誰かがコロナウィルスに感染するか次のシーズンまでないのだから、（今のところは）見送ることにした。
感想
元々、Excel で効率的にグラフを作成するために生成した csv から出来てるので、こちら側でもそれをそのまま配列にしたんだけど、どうもややこしいことになってしまった。順位基準にするか、ドライバーのマスタ基準にするか。個人的には、チェックボックスの位置はグランプリのたびに変えたくなかったから、何かしらマスタが必要。一方、プリセットボタンはそのグランプリの順位だから、そちらに依存。Chart.js に渡すデータセットをどちら基準にするかどうかが、JavaScript の書き易さに繋がる。データ構造は大事ですね。とは言え、データの持たせ方を最初にじっくり考えたところで、見切れるはずもなし。このまま行く。
困ったことは、はてなによる介入ｗ。まず、onclick イベントハンドラを HTML に記述すると、保存時に消される。スクリプトで記述するしかない。もう1つは、はてなのキーワード。バルテリとミックの3文字が何かのキーワードになってるらしく、動作確認したら、別のページに飛ばされた。迷惑千万だった。やめてくれｗ。
データを非表示にするときの方法は、Web で調べたところ、dataset を変更する方法と、legend（凡例）を変更する方法のふたつが見つかったけど、legend の方は上手くいかなかった。dataset.hidden = true にして、消してます。
これからやること：
- chartjs-plugin-zoom の利用（パン／拡大／縮小）
- ちょっとした便利技実装（1個だけアイデアを持ってるので）
- 操作方法を記述する（無くても分かるけど）
- ツールチップをちょっとこだわってみる
- ラップタイムチャートを作る
諦めて前に進んだこと：
- Chart.js の話）ポインタに 'rect' を使うと線種や塗りつぶしが機能しない
