実装の意図

成績の推移を見やすくするため、各教科の点数と平均点を棒グラフで表示する機能を実装しました。

最初はChart.jsなどのライブラリも検討しましたが，

点数と平均点を横に並べて表示したい
教科数が人によって異なる
教科数が増えても色を自動で割り振りたい
後から自由にデザインを変更したい

という条件を満たすのが難しいと感じ，今回はdivを使ってグラフを描画しています。

色を自動生成する工夫

私の通う学校には，教科数が学年や選択した教科によって異なります。

固定色では，

色が足りない
同じような色が並ぶ
新しい教科を追加すると管理が面倒

という問題がありました。

そこで，「教科数」と「何番目の教科か」を引数に色を決める，グラデーション生成関数を作成しました。

実装した関数

function SetColor(a,b,c){//総数・要素・番号を引数にとり、色を付けて返す
  let d=255;
  let e=80;
  let f=115;
  for(let g=0; g<(140*3/a)*c; g++){
    if(g<140){
      d--;
      e++;
    }
    else if(g<280){
      e--;
      f++;
    }
    else{
      d++;
      f--;
    }
  }
  b.style.setProperty('--main',`rgb(${d},${e},${f})`);
}

この関数ではRGB値を少しずつ変化させています。

開始色は ■rgb(255,80,115)です。

① 赤を減らし、緑を増やす

ピンク→オレンジ→黄緑

② 緑を減らし、青を増やす

緑→水色→青

③ 青を減らし、赤を増やす

青→紫→ピンク

完全な虹色ではありませんが，教科の識別がしやすくなりました。

4教科なら 0% 25% 50% 75%
7教科なら 0% 14% 28% 42% 57% 71% 85%

420÷教科数だけ色相を進めているため，教科数が変わっても均等に色が散らばります。

CSSとの連携

CSS変数

生成した色はCSS変数へ設定しています。

element.style.setProperty("--main", color);

棒グラフ

.graph-element{
    background:var(--main);
}

としているため，JavaScript側は「色を決める」だけで済みます。

最後に

今回は、棒グラフを色分けするために実装したグラデーション生成関数を紹介しました。

一般的には配色ライブラリを利用する方法もありますが、

教科数が毎回変わる
色一覧を管理したくない
自由に調整したい

という今回の要件では、自前で実装した方が扱いやすいと感じました。

次回は、データが存在しない場合に「×」を描画する方法を紹介します。

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

前回 → ③：時間割を管理するデータ設計

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

次回 → ④(中編)：Chart.jsを使わずに成績グラフを実装する - ×の描画
投稿次第，掲載します。