超簡単chart.jsでグラフ表示 ランキング遷移グラフ編

HPやブログなどでグラフ表示が必要な場合は、迷わずchart.jsを使用することをお勧めします。

どんなに簡単にグラフ表示が出来るか例題を作って説明します。

例題の内容

今回は、chart.jsを使用したベスト10＋圏外の「日々のランキング」１週間分の遷移をグラフ化してみます。

X(横)軸は日付で値は、11/1 ～11/7
Y(縦)軸はランキングで値の範囲は、1(位)～10(位) と11(圏外)のみ
を想定します。
例とするデータは、

とします。
ランキングの遷移で、横軸は、定間隔なので「線グラフ」にします。

グラフ表示に必要な構成

Javascript であるchart.jsを読み込む部分

ダウンロードしてサーバーにアップロードしたものを読み込むのも良いのですが、今回は簡単に提供サイトから直接読み込みます。
そのソースは、

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

このたった１行です。

グラフの描画エリア

グラフを描画する場所(タグ)を指定します。
そのソースは、

<canvas id="Chart1" style="max-width: 600px;margin: auto;"></canvas>

このたった１行です。

グラフ本体プログラム

グラフ本体のプログラムでJavascriptで記述します。
大まかに分けると次の4つで構成します
1.Chartクラスの定義とインスタンス化部分
2.グラフのタイプ
3.データセット
4.オプションズ

var ctx = document.getElementById("Chart1");
var Chart1 = new Chart(ctx, {
    type: 'グラフのタイプ',
    data: データセット,
    options: オプションズ,
});

Chartクラスの定義とインスタンス化部分

描画エリアへ渡すChart1を作ります。
ソースコードは、

var ctx = document.getElementById("Chart1");
または、
var ctx = document.getElementById("Chart1").getContext("2d");
または、
var ctx = $("#Chart1");
または、
var ctx = "Chart1";

今回使用したのは１行目です。

グラフのタイプ指定

大まかなパラメータ群の１つで「type」です。
グラフの形を指定します。
line = 線グラフ
bar = 棒グラフ
radar = レーダーグラフ
doughnut = ドーナツ型グラフ
pie = 円グラフ
polarArea = 鶏頭図
bubble = バブルグラフ
scatter = 散布図
で例題の「線グラフ」だとソースコードは、

type: 'line'

となります。

データセット

これも大まかなパラメータ群の１つで「data」です。
グラフのデータを指定します。
指定方法にNumberタイプとPointタイプが有ります

Numberタイプデータ指定

Numberタイプは、X軸をカテゴリ軸として指定します。
配列labelsが、X軸の目盛りになります。

Y軸データは、Datasetsになります。
内容は、
label: '曲線の名称'
data:へ、Y軸の値をカテゴリ分の配列として記述します。

ソースコードは、

data{
    labels: ['11/1', '11/2', '11/3',  '11/4', '11/5', '11/6', '11/7'],
    datasets: [
        {
            label: '順位',
            data: [11, 8, 4, 2, 1, 3, 7]
        }
    ]
}

複数の項目(曲線)を表示するには、
このlabelとデータを{}で囲んだものをカンマで区切り、項目の数だけ並べます。
例題ではこのNumberタイプで２つのデータを使用します。

Pointタイプデータ指定

Pointタイプは、
X,Yペアで、座標ポイントとし指定します。
ソースコードは、

data{
    datasets:[
        {
            label: '順位',
            data: [
                { x: 10, y: 14 },
                { x: 20, y: 28 }
             ]
        }
    ]
}

このような感じです。
Numberタイプと同様、複数の項目(曲線)を表示するには、
このlabelとデータを{}で囲んだものをカンマで区切り、項目の数だけ並べます。

オプションズ

これも大まかなパラメータ群の１つで「options」です。
グラフのタイトル、
グラフの目盛り振り方、
グリッドの色、
線の描画方法など細かい設定が可能です。
ソースコードは、

options: {
    title: {
        display: true,
        text: '人気ランキング遷移'
    },
    scales: {
        xAxes: [{   // X軸
            gridLines: {                       // 補助線
               color: "rgba(255, 0, 0, 0.2)", // 補助線の色
               zeroLineColor: "black"         // x=0（縦線の色）
            }
        }],
        yAxes: [{   // Y軸
            gridLines: {                        // 補助線
                color: "rgba(0, 0, 255, 0.2)",  // 補助線の色
                zeroLineColor: "black"          // y=0（横線の色）
            },
            ticks: {    // 目盛り
                reverse: true,
                Max: 11,
                Min: 1,
                stepSize: 1,
                callback: function(value, index, values){
                    if(value == 0){
                        label = ""
                    }
                    else if(value <= 10){
                        label = value + '位'
                    }
                    else if(value == 11){
                        label = "圏外"
                    }
                    else{
                        label = ""
                    }
                    return  label
                }
            }
        }]
    }
}

ランキングなので小さな値を上にする（1位が上)ために
「reverse」をtrueにしています。

目盛りの設定 はCallBack関数を用いて
順位の値が0の時は、未表示
順位の値が1～10の時は、順位の値に「位」を付けて表示
順位の値が11の時は、「圏外」を表示
順位の値が上記以外の時は、未表示
と言うように細かく設定できます。

例題に沿った実際のソースコード

これまでの説明を盛り込んだグラフ表示に必要な実際のソースコードは、

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

    <canvas id="Chart1" style="max-width: 600px;margin: auto;"></canvas>
    <script>
    var ctx = document.getElementById("Chart1");
    var Chart1 = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['11/1', '11/2', '11/3', '11/4', '11/5', '11/6', '11/7'],
        datasets: [
            {
                label: 'Aの順位',
                data: [11, 8, 4, 2, 1, 3, 7],
                borderColor: "rgba(0,127,0,1)",
                backgroundColor: "rgba(0,0,0,0)"
            },
            {
                label: 'Bの順位',
                data: [2, 6, 9, 11, 11, 6, 3],
                borderColor: "rgba(255,0,0,1)",
                backgroundColor: "rgba(0,0,0,0)"
            }
        ],
    },
    options: {
        title: {
            display: true,
            text: '人気ランキング遷移'
        },
        scales: {
            xAxes: [{   // X軸
                gridLines: {                   　　// 補助線
                    color: "rgba(255, 0, 0, 0.2)", // 補助線の色
                    zeroLineColor: "black"         // x=0（縦線の色）
                }
            }],
            yAxes: [{   // Y軸
                gridLines: {                        // 補助線
                    color: "rgba(0, 0, 255, 0.2)",  // 補助線の色
                    zeroLineColor: "black"          // y=0（横線の色）
                },
                ticks: {    // 目盛り
                    reverse: true,
                    Max: 11,
                    Min: 1,
                    stepSize: 1,
                    callback: function(value, index, values){
                        if(value == 0){
                            label = ""
                        }
                        else if(value <= 10){
                            label = value + '位'
                        }
                        else if(value == 11){
                            label = "圏外"
                        }
                        else{
                            label = ""
                        }
                        return  label
                    }
                }
            }]
        },
    }
    });
    </script>

になります。

グラフを描画

実際にこの場所にソースコードを展開して、グラフを描いてみます。

このように表示されます。

chart.jsでランキング遷移グラフを表示するまとめ

簡単に、本格的なグラフを描くことが出来ました。
ランキング遷移グラフなら、このソースコードをコピぺして、
データとラベル部分を書き換えれば、あっという間にグラフが完成してしまいます。

このchart.jsによるランキング遷移グラフは、このサイトの以下の関連記事のなかでも応用しています。