Chart.js を使って作る折れ線グラフのシンプルなサンプル

更新:

Chart.js で曲線ではなく、直線のグラフを作るサンプルや、基本的なプロパティについて説明する。

折れ線グラフ

Chart.js で線グラフを描こうとするとデフォルトでは曲線になる。 Wikipedia によると、Line Chart は一般的に曲線で、折れ線グラフはその特殊ケースらしい。 直線で描く折れ線グラフの方が馴染み深いが、国や分野によって違うのだろうか。 それはともかく、最低限のプロパティだけ指定すると以下のような曲線のグラフになる。

曲線のグラフ

コードは以下の通り。 分かりやすいようにかなりシンプルにしてある。 data と options は Chart 関数内に書いても良いが、個別に定義した方がデータが扱いやすいかもしれない。 borderColor は線の色の指定で、rgba() のほか、#f90 や green など CSS の表記が使える。

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

<style>
#ex_chart {max-width:640px;max-height:480px;}
</style>

<canvas id="ex_chart"></canvas>

<script>
var ctx = document.getElementById('ex_chart');

var data = {
    labels: ["1月", "2月", "3月", "4月", "5月"],
    datasets: [{
        label: 'プリンター販売台数',
        data: [880, 740, 900, 520, 930],
        borderColor: 'rgba(255, 100, 100, 1)'
    }]
};

var options = {};

var ex_chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: options
});
</script>

そして、このグラフについていくつか変更したい点が出てくる。 まず、冒頭述べた通り曲線ではなく直線にしたい。 そして線の下の領域を無色(色を付けない)にしたい。 また、縦軸(Y)は自動的に目盛りをふってくれるが、0(ゼロ)や任意の値に変えたい。 これらの変更を加えたコードが以下となる。 変数 data と options 以外は同じなので省略する。

var data = {
    labels: ["1月", "2月", "3月", "4月", "5月"],
    datasets: [{
        label: 'プリンター販売台数',
        data: [880, 740, 900, 520, 930],
        borderColor: 'rgba(255, 100, 100, 1)',
        lineTension: 0,
        fill: false,
        borderWidth: 3
    }]
};

var options = {
    scales: {
        yAxes: [{
            ticks: {
                min: 300
                //beginAtZero: true
            }
        }]
    }
};

data のプロパティには以下を加えた。

  • lineTension
    ベジェ曲線の張り具合。 0(ゼロ)を指定すると直線になる。 0.1、0.2、・・・など増やしていくと曲がり具合が変わる。
  • fill
    線の下側の領域に色を塗るか否かの指定。 false で無色になる。
  • borderWidth
    線の太さ。

options のプロパティには以下を加えた。

  • min
    最小値。 ここでは yAxes(Y軸)で指定しているので、その最小値となる。 0(ゼロ)を指定しても良い。 逆に最大値を指定したい場合は max を使う。
  • beginAtZero
    true にすると 0 から始まる。 ここでは紹介だけのため、コメントアウトしていて使用していない。

そして以下のような折れ線グラフができる。

折れ線グラフ、直線

グラフのタイトルや軸にラベルを追加したい

グラフをいじっているとやりたいことが増えていく。 特に縦軸は数字しかないので分かりやすいように、文字を追加したり、ラベルを付けたい。 変更内容は以下の通り。

var data = {
    labels: ["1月", "2月", "3月", "4月", "5月"],
    datasets: [{
        label: 'プリンター',
        data: [880, 740, 900, 520, 930],
        borderColor: 'rgba(255, 100, 100, 1)',
        lineTension: 0,
        fill: false,
        borderWidth: 3
    }]
};

var options = {
    scales: {
        xAxes: [{
            scaleLabel: {
                display: true,
                labelString: '月'
            }
        }],
        yAxes: [{
            ticks: {
                min: 300,
                userCallback: function(tick) {
                    return tick.toString() + '台';
                }
            },
            scaleLabel: {
                display: true,
                labelString: '台数'
            }
        }]
    },
    title: {
        display: true,
        text: '販売台数'
    }
};

options のプロパティには以下を加えた。

  • scaleLabel
    縦横の軸のラベル。 display が true で表示。 labelString に表示したい文字列や単位などを書く。 ここではX軸、Y軸それぞれに指定した。
  • title
    グラフのタイトル。 display が true で表示。 text に表示したい文字列を書く。

このサンプルのように userCallback を使って目盛りの数値に文字列を追加することができる。 ラベルに「台数」と書いたので数値だけでも良いが、こういうこともできるということで例として書いた。

そして以下のような折れ線グラフになる。

折れ線グラフにタイトル、軸のラベルを追加

複数の折れ線グラフ

data の datasets にデータを増やすごとにグラフは増えていく。

var data = {
    labels: ["1月", "2月", "3月", "4月", "5月"],
    datasets: [{
        label: 'プリンター',
        data: [880, 740, 900, 520, 930],
        borderColor: 'rgba(255, 100, 100, 1)',
        lineTension: 0,
        fill: false,
        borderWidth: 3
    },
    {
        label: 'パソコン',
        data: [1200, 1350, 1220, 1220, 1420],
        borderColor: 'rgba(100, 100, 255, 1)',
        lineTension: 0,
        fill: false,
        borderWidth: 3
    }]
};

var options = {
    scales: {
        xAxes: [{
            scaleLabel: {
                display: true,
                labelString: '月'
            }
        }],
        yAxes: [{
            ticks: {
                min: 300,
                userCallback: function(tick) {
                    return tick.toString() + '台';
                }
            },
            scaleLabel: {
                display: true,
                labelString: '台数'
            }
        }]
    },
    title: {
        display: true,
        text: '販売台数'
    }
};

これは以下のようになる。

複数の折れ線グラフ

これで Chart.js を使って基本的な曲線や折れ線グラフが描けるだろう。

このエントリーをはてなブックマークに追加