JavaScriptでレーダーチャートを描画してみた

はじめに

後輩社員の評価のために、レーダーチャートをつかって可視化したい！と思って、でもExcelはつまんないしなーというのでJavaScriptでつくってみた、という話

参考

主にこの記事を大いに参考にさせていただきました
Chart.jsでグラフを描画してみた

成果物

説明

画面はこんな感じ
後輩社員の名前を入れて、特定の時期で数値比較をしたいなぁという意図
日付と数値入力したら、こんな感じでレーダーチャートが出るというだけの内容

ロジック

やっていることとしては、
DOM操作でinputのテキスト情報を取得して、レーダーチャートのデータに当てはめているだけ

ハマったこと

主にチャート描画とは関係ない初歩的な内容でハマった

・HTMLのidのタイプミスで全然反映されない
→VScodeでいい感じに検出してくれる拡張機能はないものか。。。

・最初からオブジェクトのプロパティにアクセスしようとして、nullでエラー
→htmlでオブジェクトのvalueに初期値を設定し、js側で下記のようにケアした

var val_com = document.getElementById("val_communication");
var val = val_com?.value ?? "かえるのうた";

感想

JavaScriptは趣味でたま～に触る程度なので、毎回細かい内容を忘れると思ったので、定期的に触ろうかな、と思った
あと、一応GitHubに今回のやつ置いているので、コード見たい方はどうぞ