2018.06.19 Tue

ちゃーっとチャートが描ける、Chart.jsの使い方

こんにちは、福薗です。

４月から５月にかけて、システムに関する研修を受けさせていただきました。
研修の最後に、学んだことの集大成として最終課題を製作したのですが、その中でレーダーチャートを組み込むシーンがありました。

ん？レーダーチャート…？
どうやって描けばいいんだ…？

そんな悩める私を助けてくれた便利システムが、ありました。

『Chart.js』

使い方を、ちゃーっと、説明したいと思います。

目次／このページでわかること

Chart.jsとは

様々なグラフを簡単に組み込むことができるJavaScriptです。
Chart.jsのTOPページへ

現在（2018年7月時点）での最新バージョンは2.7.2になります。

チャートの種類

Chart.jsは大きく分けて以下の８つのグラフを描写することができます。
・線グラフ
・棒グラフ
・レーダーチャート
・ドーナツと円グラフ
・鶏頭図
・バブルチャート
・散布図
・面グラフ

また、これらを複数組み合わせてグラフを描くこともできます。

Chart.jsの導入方法

まず、公式サイトにアクセスします。
TOPページからGitHubをのページに飛び、

「Clone or download」→「Download ZIP」を選択します。

ダウンロード後解凍し、プロジェクトに設置します。

<script src="Chart.js"></script>

②CDNで提供されているChart.jsを読み込む
下記サイトからCDNで提供されているChart.jsを読み込んでも導入することができます。
https://cdnjs.com/libraries/Chart.js

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

※圧縮版（min）もあります。

Chart.jsの設置方法

Chart.jsはHTML5のcanvasを使って描写します。
描きたい場所に『canvasタグ』とJSで与える『id』、必要に応じて『width』と『height』を指定します。

<canvas id=“graph” width=“300px” height=“300px”></canvas>

これでHTML側の準備はOKです。

Chart.jsの処理の記述

いよいよチャートの内容を書いていきましょう。
それぞれの描きたいチャートのリファレンスを参照して基本的な形を描きます。

今回は実際に課題で使用したレーダーチャートを描きたいと思います。

<script>
    $(function(){

        var drawGraph = function(data){
            var ctx = document.getElementById('graph').getContext('2d');
          // データ1
            var data1 = {
                label:'今日 (%)',
                data:data[1],
                backgroundColor: "rgba(250, 50, 50, 0.3)",
                borderColor: "rgba(200, 50, 50, 0.3)",
                pointHoverBackgroundColor: "rgba(200, 50, 50, 0.3)",
                pointHoverBorderColor: "rgba(200, 50, 50, 0.3)",
            };
          // データ2
            var data2 = {
                label:'昨日 (%)',
                data:data[2],
                backgroundColor: "rgba(50, 50, 250, 0.3)",
                borderColor: "rgba(50, 50, 200, 0.3)",
                pointHoverBackgroundColor: "rgba(50, 50, 200, 0.3)",
                pointHoverBorderColor: "rgba(50, 50, 200, 0.3)",
            }
          // ラベル(横軸)
            var label = data[0];

          // データの設定
            var config = {
                type: 'radar', // グラフの種類（レーダーチャートを指定）
                data: { labels: label, datasets: [data1, data2]},

                // オプション設定
                options: {
                    //凡例の設定
                    legend: {
                      position: 'left',
                    },
                    // レスポンシブ指定
                    responsive: true,
                    //スケールの設定
                    scale: {
                        pointLabels: {
                            fontSize: 15,
                        },
                        ticks: {
                            // 目盛り値のカスタマイズ
                            stepSize: 10,
                            // 最小値の値を0指定
                            beginAtZero:true,
                            min: 0,
                            // 最大値を指定
                            max: 100,
                        }
                    }
                }
            }

          var myChartGraph = new Chart(ctx, config);

        };

        // ラベルの設定
        var data = [['１群', '２群', '３群', '４群', '５群','６群'],
                    [44, 30, 43, 11, 70, 20],
                    [50, 30, 11, 89, 36, 55]]
        drawGraph(data);
    })

    </script>

「//データの設定」の『type』で、チャートの種類を選びます。
レーダーチャートの場合は『radar』と設定します。
「//データ１」「//データ２」のように、反映させるデータを、それぞれどのように表示させるか設定し、「//データの設定」「//ラベルの設定」を行えば基本的な形が描写されます。

これに加えて、「//オプションの設定」にて詳細な描写の設定を行うことができます。
ここに記している他にもカスタマイズすることができるので、リファレンスをご参照ください。
http://www.chartjs.org/docs/latest/charts/radar.htmlhttps://misc.0o0o.org/chartjs-doc-ja/charts/radar.html（日本語）

ちなみに、オプションを反映させるコツはoptions、scale、ticksの順番で囲っていくことです。
私はこれが分からず、解決にとても時間がかかりました。

上記のコードで実装したチャートがこちらになります。