実装の意図

成績グラフでは，まだ入力されていないテストも存在します。

空欄ではなく， 『×』 を表示しデータが存在しないことを表現したい，と考え当初は文字で設計していました。

<span>×</span>

しかし，実際にグラフへ組み込んでみると，

特に文字サイズに関しては画面サイズによって自動で制限されてしまうため，文字ではサイズ調整に限界がありました。

CSSでの描画

そこで，「文字を表示する」から「×を描画する」へ方針を転換し，下記のコードを実装しました。

.graph-text::before{
    transform:rotate(45deg);
}

.graph-text::after{
    transform:rotate(-45deg);
}

疑似要素を利用して，45度と-45度に回転させた線を重ねています。
これにより，線の長さや太さなども自在に更新できるようになりました。

こちらが完成形になります。ここに文字は一切使用していません。

文字を表示するだけなら簡単ですが，表示サイズやデザインを細かく調整したい場合は、CSSで図形として描画するのも良いのではないでしょうか。

次回は，これまで紹介した色分けや表示方法を組み合わせて，divだけで棒グラフ全体を描画した方法を紹介します。

「Base」紹介HP(再掲) → https://ss719917.stars.ne.jp/HP/index.html
「Base」試用版(再掲) → https://ss719917.stars.ne.jp/

前回 → ④(前編)：Chart.jsを使わずに成績グラフを実装する - グラデーション生成関数

今回 → ④(中編)：Chart.jsを使わずに成績グラフを実装する - ×の描画

次回 → ④(後編)：Chart.jsを使わずに成績グラフを実装する - divで棒グラフを作る
投稿次第，掲載します。