format_list_bulleted
【Chart.js】Chart.jsのレーダーチャートを使ってポケモンの個体値表示をする
最終更新日時:2020-05-08 11:24:43

本記事ではJavaScriptのライブラリであるChart.jsを用いてポケモンの個体値を表示する際に用いられるレーダーチャートを作成したいと思います。Chart.jsのインストールや基本的な使い方を知りたい方は「Chart.jsのインストールと基本的な使い方について解説」を参照してみてください。また、線グラフや棒グラフの使い方について知りたい方は「Chart.jsでオプションを理解して美しい雨温図を実装する」も参考にしてみてください。

今回作成するレーダーチャート

今回はおなじみポケモンのピカチュウとアチャモの６段階で表される個体値をレーダーチャートにしてみます。今回使用したコードはcode-databaseのgithubリポジトリにありますので、手元で確認したい方は是非活用してみてください！

レーダーチャートの作成手順

レーダーチャートを作成する手順は以下のようになります。Chart.jsのインストールはすでに完了してある前提で進めます。

  1. 表を表示するcanvas要素を作成する
  2. レーダーチャートのグラフを表示する
  3. メモリを0から6まで表示させるようにする

それではレーダーチャートを作っていきます。

レーダーチャートの作成

レーダーチャートを表示するcanvas要素の作成

まずはindex.htmlにレーダーチャートを表示するためのcanvas要素を配置します。Chart.jsはデフォルトでresponsiveオプションがtrueになっているため、canvasの親のサイズに自動で対応します。ですので今回は親要素にwidth:50%;のdivタグを配置してあります。

(index.html)

<div style="width: 50%;">
    <canvas id="pokemonChart"></canvas>
</div>

レーダーチャートのグラフ表示

続いて本題のレーダーチャートを表示していきましょう。Chart.jsでは基本的に'type', 'data', 'options'の３つのオプションを指定することで表を描画することができます。この辺について基礎からやりたい方は「Chart.jsでオプションを理解して美しい雨温図を実装する」がおすすめです。

基本的なChartインスタンスのオプション
type描画する表の種類
data表示するデータ
options表に関する設定（メモリなど）

今回はtypeに'radar'を指定します。また、ピカチュウとアチャモの個体値を表示したいのでdatasetsを二つ用意します。

const pokemonChart = document.getElementById('pokemonChart')
new Chart(pokemonChart, {
    "type": "radar",
    "data": {
        "labels": ["HP", "こうげき", "ぼうぎょ", "すばやさ", "とくこう", "とくぼう"],
        "datasets": [
            {
                "label": "ピカチュウ",
                "data": [3, 3, 5, 4, 3, 6],
                "fill": true,
                "backgroundColor": "rgba(255, 99, 132, 0.2)",
                "borderColor": "rgb(255, 99, 132)",
                "pointBackgroundColor": "rgb(255, 99, 132)",
                "pointBorderColor": "#fff",
                "pointHoverBackgroundColor": "#fff",
                "pointHoverBorderColor": "rgb(255, 99, 132)"
            },
            {
                "label": "アチャモ",
                "data": [4, 5, 6, 3, 3, 4],
                "fill": true,
                "backgroundColor": "rgba(54, 162, 235, 0.2)",
                "borderColor": "rgb(54, 162, 235)",
                "pointBackgroundColor": "rgb(54, 162, 235)",
                "pointBorderColor": "#fff",
                "pointHoverBackgroundColor": "#fff",
                "pointHoverBorderColor": "rgb(54, 162, 235)",
                "pointStyle": 'rect'
            }]
    },
    "options": { }
});

レーダーチャート(type:'radar')のdatasetsで用いることのできる代表的なオプションには次のようなものがあります。

labelデータセットの名前
data使用するデータ
fill線の内部を塗りつぶすかどうか
backgroundColor線の内部の塗りつぶしの色
borderColor線の色
pointBackgroundColor点の塗りつぶしの色
pointBorderColor点の境界線の色
pointHoverBackgroundColor
マウスオーバー時の点の塗りつぶしの色
pointHoverBorderColor
マウスオーバー時の線の色
pointStyle点の形

今回は上記のコードのような指定をしていますので確認してみてください。さらにオプションを詳しく調べたい方はChart.jsの日本語ドキュメントを参考にしてみましょう！

現時点でのレーダーチャートの表示は以下のような感じになっていると思います。

一見、失敗してそうですが、これはメモリの原点?が3.0になっているせいです。ですのでレーダーチャートが表示されていれば大丈夫です。次項でメモリの指定をしていきます。

メモリ(放射軸)の指定

options/scale/ticksオプションを指定することでメモリの最低値と最高値を設定できます。

scales/ticksオプション
suggestedMin
メモリの最低値(自動スケール機能付き)
suggestedMax
メモリの最高値(自動スケール機能付き)
minメモリの最低値(自動スケール機能なし)
maxメモリの最高値(自動スケール機能なし)

自動スケール機能とは表示するデータの値が最低値、または最高値を上回っても自動で表のメモリを調整してくれるものです。これは動的に表を作成する場合などで活用されます。「自動スケールについて」も参考にしてみてください！

"options": {
    scale: {
        ticks: {
            suggestedMin: 0,
            suggestedMax: 6,
        }
    }
}

今回は最低値を0に最高値を6にしました。(個体値nがn<0,6<nになることはないはずだが、今後増えることも想定して自動スケール機能をつけています)

これらを指定することで以下のようなレーダーチャートができます。お疲れ様でした！

レーダーチャートのコード全体

今回使用したコードの全体を最後に紹介します。

(index.html)

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <script src="./node_modules/chart.js/dist/Chart.js"></script>
    <title>chartjs_option_pokemon</title>
</head>
<body>
    <div style="width: 50%;">
        <canvas id="pokemonChart"></canvas>
    </div>
    <script src='main.js'></script>
</body>
</html>

(main.js)

const pokemonChart = document.getElementById('pokemonChart')

new Chart(pokemonChart, {
    "type": "radar",
    "data": {
        "labels": ["HP", "こうげき", "ぼうぎょ", "すばやさ", "とくこう", "とくぼう"],
        "datasets": [
            {
                "label": "ピカチュウ",
                "data": [3, 3, 5, 4, 3, 6],
                "fill": true,
                "backgroundColor": "rgba(255, 99, 132, 0.2)",
                "borderColor": "rgb(255, 99, 132)",
                "pointBackgroundColor": "rgb(255, 99, 132)",
                "pointBorderColor": "#fff",
                "pointHoverBackgroundColor": "#fff",
                "pointHoverBorderColor": "rgb(255, 99, 132)"
            },
            {
                "label": "アチャモ",
                "data": [4, 5, 6, 3, 3, 4],
                "fill": true,
                "backgroundColor": "rgba(54, 162, 235, 0.2)",
                "borderColor": "rgb(54, 162, 235)",
                "pointBackgroundColor": "rgb(54, 162, 235)",
                "pointBorderColor": "#fff",
                "pointHoverBackgroundColor": "#fff",
                "pointHoverBorderColor": "rgb(54, 162, 235)",
                "pointStyle": 'rect'
            }]
    },
    "options": {
        scale: {
            ticks: {
                suggestedMin: 0,
                suggestedMax: 6,
            }
        }
    }
});

この記事のまとめ

本記事ではChart.jsを用いてレーダーチャートを作成する方法をポケモンの個体値チャートを例にとって説明しました。最後にこの記事の要点についてまとめておきます！

  • Chart.jsのtype:'radar'を指定することでレーダーチャートを実装できる
  • datasetsのオプションを指定することでグラフのオプションを指定できる
  • optionsのscaleオプションを用いることでメモリの最低値を最高値を指定できる

是非みなさんもChart.jsを活用してみてください！