Chart.jsでグラフを描画する（折れ線グラフ）

2018/02/15 2018/02/26

グラフ描画ライブラリのChart.jsがかなり使いやすく簡単に描画できたのでメモ。

今までいろいろグラフ描画ライブラリを試してきたけど（jQuery系とかGoogleとか）、これが一番きれいに描画できるし使い勝手もいいんじゃないかなと思います。

今回は折れ線グラフの描き方についてメモしておきます。

[ad#top-1]

1 HTMLの中にグラフ描画エリアを設置する
2 まずは基本形
3 グラフ面を透明化してラインカーブをなくす
4 グラフの大きさを固定する
5 データを追加する
6 軸ラベルのフォントサイズを変える
7 マーカーサイズを変える

HTMLの中にグラフ描画エリアを設置する

Chart.jsの読み込みは以下のとおりです。GitHubサイトからダウンロードもできます。

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

canvasタグでグラフ描画エリアを設定します。その下のscriptタグにグラフ描画のためのソースコードを書きます。

<canvas id="ChartDemo"></canvas>
<script>
  ここにソースを書く
</script>

まずは基本形

こんな感じに描画できます。

ソースコードは以下の通り

var ctx = document.getElementById("ChartDemo").getContext('2d');
var ChartDemo = new Chart(ctx, {
   type: 'line',
   data: {
      labels: ["Item1", "Item2", "Item3", "Item4", "Item5", "Item6", "Item7"],
      datasets: [
      {
         label: "Chart-1",
         borderColor: 'rgb(255, 0, 0)',
         data: [20, 26, 12, 43, 33, 21, 29],
      },
      ]
   },
   options: {
      responsive: true,
   }
});

グラフ面を透明化してラインカーブをなくす

グラフ面がグレーに着色されているのと、ラインがスムージングされているので、これを除外します。これが一般的な折れ線グラフですね。

var ctx = document.getElementById("ChartDemo").getContext('2d');
var ChartDemo = new Chart(ctx, {
   type: 'line',
   data: {
      labels: ["Item1", "Item2", "Item3", "Item4", "Item5", "Item6", "Item7"],
      datasets: [
      {
         label: "Chart-1",
         borderColor: 'rgb(255, 0, 0)',
         lineTension: 0, //<===追加
         fill: false,    //<===追加
         data: [20, 26, 12, 43, 33, 21, 29],
      },
      ]
   },
   options: {
      responsive: true,
   }
});

グラフの大きさを固定する

今までのは画面いっぱいに描画されていました。これはレスポンシブ対応をしていて、画面サイズが変わればそれに応じてサイズが調整されますし、スマホからでも見れます。

そうではなく、下図のように固定サイズにしたい場合の方法です。

まず、canvasタグに幅と高さを設定します。これだけでは固定サイズにはなりません。

<canvas id="ChartDemo" width="400" height="250"></canvas>

オプションにあったresponsiveをfalseにすればOKです。

options: {
   responsive: false, //ここをfalseにする
}

データを追加する

下図のようにデータを追加する方法です。

var ctx = document.getElementById("ChartDemo").getContext('2d');
var ChartDemo = new Chart(ctx, {
  type: 'line',
    data: {
      labels: ["Item1", "Item2", "Item3", "Item4", "Item5", "Item6", "Item7"],
      datasets: [
      {
        label: "Chart-1",
        lineTension: 0,
        fill: false,
        borderColor: 'rgb(255, 0, 0)',
        data: [20, 26, 12, 43, 33, 21, 29],
      },
      //以下を追加
      {
        label: "Chart-2",
        lineTension: 0,
        fill: false,
        borderColor: 'rgb(0, 0, 255)',
        data: [28, 22, 32, 13, 33, 41, 19],
      },
    ]
  },

  options: {
    responsive: false,
  }
});

軸ラベルのフォントサイズを変える

軸ラベルのフォントサイズを変える方法です。

var ctx = document.getElementById("ChartDemo").getContext('2d');
var ChartDemo = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ["Item1", "Item2", "Item3", "Item4", "Item5", "Item6", "Item7"],
    datasets: [
    {
      label: "Chart-1",
      lineTension: 0,
      fill: false,
      borderColor: 'rgb(255, 0, 0)',
      data: [20, 26, 12, 43, 33, 21, 29],
    },
    {
      label: "Chart-2",
      lineTension: 0,
      fill: false,
      borderColor: 'rgb(0, 0, 255)',
      data: [28, 22, 32, 13, 33, 41, 19],
    },
    ]
  },
  options: {
    responsive: false,
    scales: {
      xAxes: [{
        ticks: { fontSize: 14,},
      }],
      yAxes: [{
        ticks: { fontSize: 18,},
      }],
    },
  }
});

マーカーサイズを変える

赤ラインのマーカーの大きさを大きくしてみました。

datasetsの中のChart-1設定データの中にpointBorderWidthでマーカー大きさを設定できます。

{
  label: "Chart-1",
  lineTension: 0,
  fill: false,
  borderColor: 'rgb(255, 0, 0)',
  pointBorderWidth: 7,  //ここを追加
  data: [20, 26, 12, 43, 33, 21, 29],
},

まだまだ設定できるパラメーターはありますが、Chart.jsは他のライブラリに比べて結構使えます。

■棒グラフの描き方■

非IT企業に勤める中年サラリーマンのIT日記