Chart.jsの使い方【折れ線グラフ】

2021年1月30日

今回は、JavaScriptとHTMLで簡単にグラブの表示が出来る「Chart.js」で折れ線グラフの作り方をまとめました。

Chart.jsとは

Chart.jsとは、JavaScriptのライブラリの1つです。

Chart.jsのライブラリを読み込むことで、折れ線グラフや棒グラフ、レーダーチャートなどの描画が簡単に出来ます。

画像ではなく、JavaScriptで生成しているものなので、ブログなどでもわざわざグラフを画像化したりする必要もなくなるわけです。

また、JavaScriptでグラフの表示を変化させることが出来るため、データを変えればグラフの表示も容易に変えられます。

日々変わっていく、アクセス推移などのコンテンツページの作成も簡単に作ることが出来ますね。

Chart.jsのダウンロード（CDN）

まずは、下記のChart.jsのライブラリを読み込む必要があります。

コピーして、スクリプトタグを書く前にペーストしてください。

折れ線グラフの使い方

まずは最初に折れ線グラフを作成してみます。

折れ線グラフは、canvas要素を事前に用意し、そのcanvasに描画する形になります。

後は、JavaScriptでcanvas要素を取得し、各種データを設定していきます。

<canvas id="sample1"></canvas>

<script>
(function(){
    var ctx = document.getElementById("sample1");
    
    var data = {
        labels: ["4月", "5月", "6月", "7月", "8月"],
        datasets: [{
            label: '任天堂',
            data: [11433, 23510, 15943, 34212, 19841], //配列でデータをセット
            borderColor: 'rgba(255, 0, 0, 1)', //ボーダーの色
        }]
    };
    
    var options = {};
    var ex_chart = new Chart(ctx, {
        type: 'line', //折れ線グラフ
        data: data, //上記設定のデータ
        options: options
    });
}());
</script>

※これらのサンプルデータは適当に打ったものなので深い意味はありません。

複数入力したい場合は、datasetsに配列を追加します。

<canvas id="sample2"></canvas>

<script>
(function(){
    var ctx = document.getElementById("sample2");
    
    var data = {
        labels: ["4月", "5月", "6月", "7月", "8月"],
        datasets: [{
            label: '任天堂',
            data: [11433, 23510, 15943, 34212, 19841], //配列でデータをセット
            borderColor: 'rgba(255, 0, 0, 1)' //ボーダーの色
        },
        {
            label: 'ソニー',
            data: [6546, 11131, 2398, 64212, 23531], //配列でデータをセット
            borderColor: 'rgba(0, 255, 0, 1)' //ボーダーの色
        }]
    };
    
    var options = {};
    var ex_chart = new Chart(ctx, {
        type: 'line', //折れ線グラフ
        data: data, //上記設定のデータ
        options: options
    });
}());
</script>

背景色の塗りつぶしを消す（変更する）

データが複数あると背景色がチカチカする場合があるので、backgroundColorで背景色を削除することも出来ることは覚えておきましょう。

<canvas id="sample3"></canvas>

<script>
(function(){
    var ctx = document.getElementById("sample3");
    
    var data = {
        labels: ["4月", "5月", "6月", "7月", "8月"],
        datasets: [{
            label: '任天堂',
            data: [11433, 23510, 15943, 34212, 19841], //配列でデータをセット
            borderColor: 'rgba(255, 0, 0, 1)', //ボーダーの色
            backgroundColor: 'rgba(0, 0, 0, 0)'
        },
        {
            label: 'ソニー',
            data: [6546, 11131, 2398, 64212, 23531], //配列でデータをセット
            borderColor: 'rgba(0, 255, 0, 1)', //ボーダーの色
            backgroundColor: 'rgba(0, 0, 0, 0)'
        }]
    };
    
    var options = {};
    var ex_chart = new Chart(ctx, {
        type: 'line', //折れ線グラフ
        data: data, //上記設定のデータ
        options: options
    });
}());
</script>

凡例の表示・非表示を切り替える

複数の入力がある場合は、どの色がどのデータか分かるように凡例が表示されます。

凡例を非表示にしたい場合は、オプションでlegend:falseの設定を行います。

<canvas id="sample4"></canvas>

<script>
(function(){
    var ctx = document.getElementById("sample4");
    
    var data = {
        labels: ["4月", "5月", "6月", "7月", "8月"],
        datasets: [{
            label: '任天堂',
            data: [11433, 23510, 15943, 34212, 19841], //配列でデータをセット
            borderColor: 'rgba(255, 0, 0, 1)' //ボーダーの色
        },
        {
            label: 'ソニー',
            data: [6546, 11131, 2398, 64212, 23531], //配列でデータをセット
            borderColor: 'rgba(0, 255, 0, 1)' //ボーダーの色
        }]
    };
    
    var options = {
         legend: {
            display: false
         }
    };
    var ex_chart = new Chart(ctx, {
        type: 'line', //折れ線グラフ
        data: data, //上記設定のデータ
        options: options
    });
}());
</script>

折れ線グラフを直線で表示する

折れ線を直線で表示したい場合は、datasetsのプロパティにlineTensionを追加し、0に設定します。

これは曲線度の設定であり、0の場合は曲線なしとなり、直線で描画できます。

<canvas id="sample5"></canvas>

<script>
(function(){
    var ctx = document.getElementById("sample5");
    
    var data = {
        labels: ["4月", "5月", "6月", "7月", "8月"],
        datasets: [{
            label: '任天堂',
            data: [11433, 23510, 15943, 34212, 19841], //配列でデータをセット
            borderColor: 'rgba(255, 0, 0, 1)', //ボーダーの色
            lineTension: 0,
        },
        {
            label: 'ソニー',
            data: [6546, 11131, 2398, 64212, 23531], //配列でデータをセット
            borderColor: 'rgba(0, 255, 0, 1)', //ボーダーの色
            lineTension: 0,
        }]
    };
    
    var options = {};
    var ex_chart = new Chart(ctx, {
        type: 'line', //折れ線グラフ
        data: data, //上記設定のデータ
        options: options
    });
}());
</script>

色を自動的に割り振りたい場合

chart.jsのグラフは、borderColorの設定を行わないとすべて同じ色で表示されてしまいます。

そのため、データ毎に色を決めておく必要があるのですが、データの数が変動したりするコンテンツを作成したい場合は、毎回データ数が変わるので色を事前に決めておくことが難しいです。

そういったケースにも対応できるように、色を自動的に割り振ってくれるプラグインが存在します。

下記のプラグインを、chart.jsのライブラリの後に読み込ませてください。

その後、optionのオブジェクトを下記のように追加します。

<canvas id="sample6"></canvas>

<script>
(function(){
    var ctx = document.getElementById("sample6");
    
    var data = {
        labels: ["4月", "5月", "6月", "7月", "8月"],
        datasets: [{
            label: '任天堂',
            data: [11433, 23510, 15943, 34212, 19841], //配列でデータをセット
            lineTension: 0,
        },
        {
            label: 'ソニー',
            data: [6546, 11131, 2398, 64212, 23531], //配列でデータをセット
            lineTension: 0,
        }]
    };
    
    var options = {
        plugins: {
            colorschemes: {
                scheme: 'brewer.Paired12' //カラーを自動変更
            }
        }
    };
    var ex_chart = new Chart(ctx, {
        type: 'line', //折れ線グラフ
        data: data, //上記設定のデータ
        options: options
    });
}());
</script>

schemeで設定した値によって、1番目の色、2番目の色、などが決まっています。

こちらのページでカラーパターンを確認したり、別のカラーパターンを試すことが出来ます。

以上、Chart.jsの使い方、でした。