コピペで!「Chart.js」を使ってレーダーチャートを表示する

2020-05-13Otherプラグイン不要

ブログ内にレーダーチャートを表示したかった為、色々なプラグインなども探しましたが、一番手軽で思ったようなキレイなチャートが表示できる軽量のJavaScript「Chart.js」を使うことにしました。

 

 

「Chart.js」では、棒グラフ円グラフ折れ線グラフレイダーチャートなど多彩なグラフを好きな色に設定して表示する事が出来ます。
それらを組み合わせた混合チャートも可能です。

様々なグラフのサンプルは公式サイトで見る事が出来ます。

Chart.js(公式サイト)
Chart.js ドキュメント

 

チャートの設定方法

  • type:描画するグラフの種類
  • data:ラベルとデータセット
  • options:オプション設定

グラフの種類は「type」で指定します。

それぞれの詳細な使い方記事は、以下の表内リンクから。

表示サンプル type グラフの種類
レイダーチャート表示サンプル radar レーダーチャート
折れ線グラフサンプル line 折れ線グラフ
棒グラフサンプル bar 棒グラフ
円グラフサンプル pie 円グラフ
ポーラーチャートサンプル polarArea ポーラーチャート
ドーナツチャートサンプル doughnut ドーナツ
散布図サンプル scatter 散布図
バブルチャートサンプル bubble バブルチャート

棒+折れ線の複合チャート の 詳細はこちら

 

グラフの表示サンプル実際のホバーアクションなどは以下をご覧ください。

 

レーダーチャート

今回は、レーダーチャート type: 'radar’ の実装方法です。

コピペで使って頂けるようにコードを紹介します。

 

手順

  • Chart.jsを読み込むコードを記述(1行のみ<head>または<body>内に)
  • JavaScriptを記述(データやデザイン設定)
  • HTMLを記述(1行のみのグラフ表示用タグ)

これだけです!

では順番に・・

Chart.jsを読み込む

サイト内の色々なページでグラフ表示する

サイトの<head>~</head>内

特定のページのみでしか利用しない場合

そのページの<body>内でもOK

 

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

 

JavaScriptを記述

注意点

記載しているコードの<script>タグ(閉じる</script>も)は、不要な場合もあります。たとえば、WordPressでJavaScriptを記述するエリアがあり、そこに記述する場合は不要。(Cocoonの記事内「カスタムJavaScript」などでも不要)
表示したいページに記述します。

1種のチャート

レイダーチャート表示サンプル
1つの場合
コードを表示
<script>
var ctx = document.getElementById("myRadarChart");
var myRadarChart = new Chart(ctx, {
  //グラフの種類
  type: 'radar',
  //データの設定
  data: {
      //データ項目のラベル
      labels: ["総合評価", "評価1", "評価2", "評価3", "評価4"],
      //データセット
      datasets: [
          {
              label: "〇〇",
              //背景色
              backgroundColor: "rgba(200,112,126,0.5)",
              //枠線の色
              borderColor: "rgba(200,112,126,1)",
              //結合点の背景色
              pointBackgroundColor: "rgba(200,112,126,1)",
              //結合点の枠線の色
              pointBorderColor: "#fff",
              //結合点の背景色(ホバ時)
              pointHoverBackgroundColor: "#fff",
              //結合点の枠線の色(ホバー時)
              pointHoverBorderColor: "rgba(200,112,126,1)",
              //結合点より外でマウスホバーを認識する範囲(ピクセル単位)
              hitRadius: 5,
              //グラフのデータ
              data: [4,3,4,4,4]
          }
      ]
  },
 options: {
    // レスポンシブ指定
    responsive: true,
    scale: {
      ticks: {
        // 最小値の値を0指定
        beginAtZero:true,
        min: 0,
        // 最大値を指定
        max: 5,
      }
    }
  }
});
</script>

 

 

複数の比較

レイダーチャート表示サンプル
複数で比較表示

 

コードを表示
<script>
var ctx = document.getElementById("myRadarChart2");
var myRadarChart2 = new Chart(ctx, {
  //グラフの種類
  type: 'radar',
  //データの設定
  data: {
      //データ項目のラベル
      labels: ["総合評価", "評価1", "評価2", "評価3", "評価4"],
      //データセット
      datasets: [
          {
             //凡例のラベル
              label: "〇〇",
              //背景色
              backgroundColor: "rgba(200,112,126,0.3)",
              //枠線の色
              borderColor: "rgba(200,112,126,1)",
              //結合点の背景色
              pointBackgroundColor: "rgba(200,112,126,1)",
              //結合点の枠線の色
              pointBorderColor: "#fff",
              //結合点の背景色(ホバーしたとき)
              pointHoverBackgroundColor: "#fff",
              //結合点の枠線の色(ホバーしたとき)
              pointHoverBorderColor: "rgba(200,112,126,1)",
              //結合点より外でマウスホバーを認識する範囲(ピクセル単位)
              hitRadius: 5,
              //グラフのデータ
              data: [4,3,4,4,4]
          },
          {
             //凡例のラベル
              label: "△△",
              //背景色
              backgroundColor: "rgba(80,126,164,0.3)",
              //枠線の色
              borderColor: "rgba(80,126,164,1)",
              //結合点の背景色
              pointBackgroundColor: "rgba(80,126,164,1)",
              //結合点の枠線の色
              pointBorderColor: "#fff",
              //結合点の背景色(ホバーしたとき)
              pointHoverBackgroundColor: "#fff",
              //結合点の枠線の色(ホバーしたとき)
              pointHoverBorderColor: "rgba(80,126,164,1)",
              //結合点より外でマウスホバーを認識する範囲(ピクセル単位)
              hitRadius: 5,
              //グラフのデータ
              data: [4,3,3,2,5]
          }
      ]
  },
 options: {
    // レスポンシブ指定
    responsive: true,
    scale: {
      ticks: {
        // 最小値の値を0指定
        beginAtZero:true,
        min: 0,
        // 最大値を指定
        max: 5,
      }
    }
  }
});
</script>

 

簡単解説

chart.js Radar(レーダーチャート)解説 ※外部リンク

 

1行目で記述している「myRadarChart」は、任意の名称です。

同一ページ内に複数のグラフを表示する際には、この名称をそれぞれに設定します。

例:レーダーチャートを2つ表示

myRadarChart1

myRadarChart2

 

データ項目ラベル

//データ項目のラベル
labels: [“総合評価", “評価1", “評価2", “評価3", “評価4"]

設定した順に時計回りに表示されます。
項目数はいくつでもOKです。増やした場合は、データ内容も同数にする事をお忘れなく!

 

チャートの対象ラベル

//凡例のラベル
label: “〇〇"

複数の比較の場合、色分けしたどちらが何かを表示するラベルです。

(A社とB社の比較など)

レイダーチャート表示サンプル

1つしか表示しない場合は、要らない気もしますが、何も設定をしなくても四角い枠は出てしまうので、何かしら設定した方が良さそう。

 

色の設定について

それぞれの色指定は、透過割合を指定出来るRGBAで指定しています。

もちろん透過が必要なければ16進コードでの指定も可能。

RGBAについては以下をご覧ください。

ホバー時の表示例

ホバー時の設定をしていますが、実際の表示は以下のような感じ。

ホバー時の表示サンプル

レイダーチャート表示サンプル

 

 

グラフデータ

実際の数値を時計まわりに設定します。

//グラフのデータ
data: [4,3,4,4,4]

 

オプション

レスポンシブ指定と、チャートの最小値(円の中心点の数値)と、最大値(円周にあたる部分の数値)を設定します。

options: {
// レスポンシブ指定
responsive: true,
scale: {
ticks: {
// 最小値の値を0指定
beginAtZero:true,
min: 0,
// 最大値を指定
max: 5,
}
}
}

 

HTMLを記述

表示したい場所に記述します。
<canvas id="myRadarChart">
</canvas>

注意点
表示する為のHTMLはこれだけですが、上記コードのように、

閉じるタグ(</canvas>)の前に改行を入れます。

 

WordPressの場合、タグのみの行はビジュアルエディタとテキストエディタを行き来するだけで消えてしまうのを防ぐ為です。

何かしらの文字を入れれば消えませんが、今回は文字の必要がない為、一番楽な「改行」で対応しています。

 

以上で完了です。

 

グラフが表示されない時

記述したJavaScriptとHTMLを見直して下さい。

以下の部分が同じになっている事を確認する

JavaScript

1~2行目
var ctx = document.getElementById(“myRadarChart“);
var myRadarChart= new Chart(ctx, {

 

HTML

<canvas id="myRadarChart“>

2つ以上のグラフを表示している場合や、他の部分で同じ名称を使っていないかを確認する

上記の解説にも書きましたが、複数のグラフを同一ページ内で表示する場合は、名称を変える必要がありますのでご注意下さい。

例:レーダーチャートを2つ表示

myRadarChart1

myRadarChart2

JavaScript、HTMLのそれぞれに対応して名称が間違えていないか確認。

 

関連記事