紹介する作品は実際に公開しています。覗いて頂けると嬉しいです|ω^)
「Base」紹介HP → https://ss719917.stars.ne.jp/HP/index.html
「Base」試用版 → https://ss719917.stars.ne.jp/
探究活動で開発したWebアプリ「Base」を題材に，設計や開発時の工夫を全5回で紹介します。
実装の意図
成績の推移を見やすくするため、各教科の点数と平均点を棒グラフで表示する機能を実装しました。
最初は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を使わずに成績グラフを実装する - ×の描画
投稿次第，掲載します。