BLOG ブログ

ホームページ制作
BLOG
【3系】Chart.jsでレーダーチャートを描画してみよう

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

更新日：2021/09/28

Chart.jsというJavaScriptのライブラリを使えば、簡単にサイト上にグラフを描画することができます。

Chart.jsで描画できるグラフは折れ線グラフ、棒グラフ、円グラフ、レーダーチャート、散布図など多岐に渡りますが、

今回はその中のレーダーチャートの描画の方法を紹介します。

1 Chart.jsの読み込み
2 レーダーチャートの表示
3 グラフのデータ設定
4 グラフのオプション設定
5 Chart.jsで描画するレーダーチャートのサンプル
6 まとめ
7 参考サイト

Chart.jsの読み込み

Chart.jsを利用する主な方法には以下の3種類があります。

※今回ご紹介する方法は全て2021年9月現在の最新である3.5.1バージョンの場合の方法になります。
　別のバージョンではChart.jsの利用方法が異なる場合があります。

※それぞれの読み込み方法で、「chart.js」以外に「chart.min.js」も利用可能です。
　どちらも機能に違いはなく、「chart.min.js」は「chart.js」からスペースや改行をなくして
　ファイルを軽量化したものになります。

1CDNを利用する方法

CDNとは、「Content Delivery Network（コンテンツ配信ネットワーク）」の略で、

Webコンテンツ配信元のサーバー（オリジンサーバー）に直接アクセスしてダウンロードするのではなく、
オリジンサーバーからWebコンテンツのコピーを取得した複数の代理サーバー（キャッシュサーバー）のどれかからコンテンツをダウンロードする仕組みです。

キャッシュサーバーは世界中に配置されていて、自分に近い場所のキャッシュサーバーを自動で選択してアクセスするので、ダウンロードの高速化が実現できます。

CDNから読み込む場合は、自分のサーバー上にChart.jsを置かなくても利用することができます。

使い方はとても簡単で、以下のコードをChart.jsを利用したい箇所の直前やheadタグに記述するだけです。


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

2npmを利用してChart.jsをローカルにインストールする方法

npmやbowerといったパッケージ管理システムを使って、Chart.jsをローカルにインストールすることもできます。

今回はnpmを使ったインストール方法をご紹介します。

npmを使ってChart.jsをインストールするには、コマンドプロンプトで以下のコードを実行します。


$ npm install chart.js

$ npm install chart.js

これでローカルのnode_modulesフォルダにインストールできたら、
chart.js/dist/chart.jsをサーバー上に置いて、scriptタグで読み込みます。


<script src="［Chart.jsへのパス］/chart.js"></script>

3GithubからChart.jsをダウンロードする方法

パッケージ管理システムを利用しない場合は、Githubからダウンロードします。

Chart.jsのGithubのページにアクセスし、

ページ下部のAssetsの「chart.js-3.5.1.tgz」をクリックしてダウンロードします。

「chart.js-3.5.1.tgz」をクリックしてダウンロード

「.tgz」という拡張子で圧縮されたファイルがダウンロードできました

「chart.js-3.5.1.tgz」は圧縮されたファイルで、解凍する必要があるので、
コマンドプロンプトで「chart.js-3.5.1.tgz」が置かれているディレクトリに移動し、

以下のコマンドで解凍します。


$ tar -xvzf chart.js-3.5.1.tgz

$ tar -xvzf chart.js-3.5.1.tgz

解凍に成功すると「package」フォルダができるので、

解凍されて「package」ができました

package/dist/chart.jsをサーバー上に置いて、scriptタグで読み込みます。


<script src="［Chart.jsへのパス］/chart.js"></script>

レーダーチャートの表示

Chart.jsの読み込みができたら、HTML上のグラフを表示したい箇所に以下のコードを記述します。
<canvas>はあまり見慣れないかもしれませんが、JavaScriptを使って図形を描画する時に使われるタグです。
（詳しくは<canvas>の公式リファレンスを参照）


<canvas id="myRadarChart" width="400" height="400"></canvas>

※id,width,heightは好きな値を設定してください。

前述の通り、<canvas>にグラフを描画するためには、どんなグラフにするのかをJavaScriptファイル上に記述する必要があります。

JavaScriptファイル上に記述する内容は以下の通りです。


var ctx = document.getElementById("myRadarChart");
var myChart = new Chart(ctx, {
    type: 'radar',
    data: ［グラフのデータ］,
    options: ［グラフのオプション］
});

var ctx = document.getElementById("myRadarChart");

var myChart = new Chart(ctx, {

type: 'radar',

data: ［グラフのデータ］,

options: ［グラフのオプション］

});

※"myRadarChart"は<canvas>のidと一致させてください。

「type: '○○'」はグラフの種類の指定で、
「type: 'radar'」でレーダーチャートを指定しています。

この値を変更することで折れ線グラフや棒グラフなども指定できます。
詳しくはChart.jsの公式リファレンスを参照してください。

次は［グラフのデータ］［グラフのオプション］の中の記述の仕方を見ていきます。

グラフのデータ設定

グラフのデータは以下のように設定します。


data: {
  //データの各項目のラベル(上から時計回り)
  labels: ["国語", "数学", "英語", "理科", "社会"],
  //データ設定
  datasets: [
    {
        //グラフのデータ(上から時計回り)
        data: [1,2,3,4,5],
        //グラフ全体のラベル
        label: "科目",
        //背景色
        backgroundColor: "rgba(255,0,0,0.5)",
        //線の終端を四角にするか丸めるかの設定。デフォルトは四角(butt)。
        borderCapStyle: "butt",
        //線の色
        borderColor: "rgba(255,255,0,1)",
        //線を破線にする
        borderDash: [],
        //破線のオフセット(基準点からの距離)
        borderDashOffset: 0.0,
        //線と線が交わる箇所のスタイル。初期値は'miter'
        borderJoinStyle: 'miter',
        //線の幅。ピクセル単位で指定。初期値は3。
        borderWidth: 3,
        //グラフを塗りつぶすかどうか。初期値はtrue。falseにすると枠線だけのグラフになります。
        fill: true,
        //複数のグラフを重ねて描画する際の重なりを設定する。z-indexみたいなもの。初期値は0。
        order: 0,
        //0より大きい値にすると「ベジェ曲線」という数式で曲線のグラフになります。初期値は0。
        lineTension: 0
    }
  ]
}

data: {

//データの各項目のラベル(上から時計回り)

labels: ["国語", "数学", "英語", "理科", "社会"],

//データ設定

datasets: [

{

//グラフのデータ(上から時計回り)

data: [1,2,3,4,5],

//グラフ全体のラベル

label: "科目",

//背景色

backgroundColor: "rgba(255,0,0,0.5)",

//線の終端を四角にするか丸めるかの設定。デフォルトは四角(butt)。

borderCapStyle: "butt",

//線の色

borderColor: "rgba(255,255,0,1)",

//線を破線にする

borderDash: [],

//破線のオフセット(基準点からの距離)

borderDashOffset: 0.0,

//線と線が交わる箇所のスタイル。初期値は'miter'

borderJoinStyle: 'miter',

//線の幅。ピクセル単位で指定。初期値は3。

borderWidth: 3,

//グラフを塗りつぶすかどうか。初期値はtrue。falseにすると枠線だけのグラフになります。

fill: true,

//複数のグラフを重ねて描画する際の重なりを設定する。z-indexみたいなもの。初期値は0。

order: 0,

//0より大きい値にすると「ベジェ曲線」という数式で曲線のグラフになります。初期値は0。

lineTension: 0

}

]

}

この他にも、「hover○○」プロパティでホバー時の効果、「border○○」プロパティで枠線の設定、「point○○」プロパティで頂点の設定ができます。
詳しくはレーダーチャートのデータセットプロパティを参照してください。

グラフのオプション設定

Chart.jsの2系と3系で、optionsの設定方法が大きく変わっています。
Chart.jsについて過去に書かれたブログなどは、2系の場合の記述の仕方になっていることが多いので、
3系を読み込んでいるのに2系の記述をしてしまわないように気をつけてください。


//オプションの設定
  options: {
    scales: {
      r: {
        //グラフの最小値・最大値
        min: 0,
        max: 100,
        //背景色
        backgroundColor: 'snow',
        //グリッドライン
        grid: {
          color: 'pink',
        },
        //アングルライン
        angleLines: {
          color: 'green',
        },
        //各項目のラベル
        pointLabels: {
          color: 'blue',
        },
      },
    },
  },

//オプションの設定

options: {

scales: {

r: {

//グラフの最小値・最大値

min: 0,

max: 100,

//背景色

backgroundColor: 'snow',

//グリッドライン

grid: {

color: 'pink',

//アングルライン

angleLines: {

color: 'green',

//各項目のラベル

pointLabels: {

color: 'blue',

Chart.jsで描画するレーダーチャートのサンプル

Chart.jsでレーダーチャートを描画すると以下のように表示されます。
ここではCDNを利用して描画しています。
ソースコードとデモページもあるので、そちらもぜひご覧ください！

ソースの表示


<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script>
<canvas id="myRadarChart" width="400" height="400"></canvas>


var ctx = document.getElementById("myRadarChart");
var myRadarChart = new Chart(ctx, {
  //グラフの種類
  type: 'radar',
  //データの設定
　data: {
    labels: ['英語', '国語', '数学', '理科', '社会'],
    datasets: [{
      label: '科目',
      //グラフのデータ
      data: [80, 60, 40, 90, 50],
      // データライン
      borderColor: 'red',
    }],
  },
  //オプションの設定
  options: {
    scales: {
      r: {
        //グラフの最小値・最大値
        min: 0,
        max: 100,
        //背景色
        backgroundColor: 'snow',
        //グリッドライン
        grid: {
          color: 'pink',
        },
        //アングルライン
        angleLines: {
          color: 'green',
        },
        //各項目のラベル
        pointLabels: {
          color: 'blue',
        },
      },
    },
  }, 
});

var ctx = document.getElementById("myRadarChart");

var myRadarChart = new Chart(ctx, {

//グラフの種類

type: 'radar',

//データの設定

　data: {

labels: ['英語', '国語', '数学', '理科', '社会'],

datasets: [{

label: '科目',

//グラフのデータ

data: [80, 60, 40, 90, 50],

// データライン

borderColor: 'red',

}],

//オプションの設定

options: {

scales: {

r: {

//グラフの最小値・最大値

min: 0,

max: 100,

//背景色

backgroundColor: 'snow',

//グリッドライン

grid: {

color: 'pink',

//アングルライン

angleLines: {

color: 'green',

//各項目のラベル

pointLabels: {

color: 'blue',

});

デモページ

まとめ

今回はChart.jsでレーダーチャートを作成する方法を紹介しました。

筆者がサイト制作でレーダーチャートを扱うことになった際、レーダーチャートについてピンポイントで詳しく紹介している記事があまりなかったので、自分が調べたことをまとめてみました。

ここで紹介した以外にも設定できる項目は色々あるので、詳しい情報を知りたい時はChart.js公式ドキュメントもぜひ参照してください。

最後までお読みいただきありがとうございました。

参考サイト

Chart.js公式ドキュメント
 とほほのChart.js入門

JavaScript コーディングサイト制作

一覧へ戻る

BLOG ブログ

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

Chart.jsの読み込み

1CDNを利用する方法

2npmを利用してChart.jsをローカルにインストールする方法

3GithubからChart.jsをダウンロードする方法

レーダーチャートの表示

グラフのデータ設定

グラフのオプション設定

Chart.jsで描画するレーダーチャートのサンプル

まとめ

参考サイト

関連記事

先輩社員の声 VOICES

CONTACT お問い合わせ

BLOG ブログ

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

Chart.jsの読み込み

1CDNを利用する方法

2npmを利用してChart.jsをローカルにインストールする方法

3GithubからChart.jsをダウンロードする方法

レーダーチャートの表示

グラフのデータ設定

グラフのオプション設定

Chart.jsで描画するレーダーチャートのサンプル

まとめ

参考サイト

FOLLOW US 最新の情報をお届けします

関連記事

先輩社員の声 VOICES

CONTACT お問い合わせ