レーダーチャート

2024年4月5日

みなさんこんにちは。
ケミストのWeb担当みやのです。

「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。

今回は「レーダーチャート」を作成してみようと思います。

Chart.js

参考：BRISK｜【3系】Chart.jsでレーダーチャートを描画してみよう

Chart.jsという、いろいろなグラフを描画してくれるライブラリがあるようです。早速実装してみましょう。

CDNで読み込みます。

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script>

<canvas>タグを設置します。IDをmyRadarChartとしておきます。

<canvas id="myRadarChart" width="100%"></canvas>

スクリプトでレーダーチャートの設定をしていきます。

var ctx = document.getElementById("myRadarChart");
var myRadarChart = new Chart(ctx, {
  type: 'radar',
  data: {
    labels: ['ビジネスマナー', 'コミュニケーション', 'パソコン', '時間管理', '企画提案', 'プレゼンテーション', 'チームマネジメント', 'マネジメント', '交渉', 'コーチング', '問題解決'],
    datasets: [{
      data: [50, 10, 80, 40, 90, 10, 10, 10, 10, 60, 50],
      label: "ビジネススキル",
      borderColor: '#32bdeb',
      backgroundColor: "rgba(50,189,235,0.5)",
    }],
  },
  options: {
    scales: {
      r: {
        min: 0,
        max: 100,
        backgroundColor: 'transparent',
        grid: {
          color: '#ccc',
        },
        angleLines: {
          color: '#333',
        },
        pointLabels: {
          color: '#333',
        },
      },
    },
  }, 
});

参考：ユーキャン｜社会人に必要なビジネススキル

スマホだとちょっとはみ出してしまいますね。配置をもっと工夫したいところです。

それにしても、社会人に必要なビジネススキルっていろいろあるんですねえ。

ヒューマンスキル、テクニカルスキル、コンセプチュアルスキルに分類されるそうです。もうやめて！みやののヒューマンスキルはゼロよ！

複数のデータを重ねることもできます。

重ねる時はdatasetsのbackgroundColorを透明にした方がいいかもですね。

まとめ

データの表示・非表示を切り替えたりできたらいいんですが。