JavaScript
chart.js

Chart.jsをまとめる➀ (線グラフ)

はじめに

WebAppを作っている中で、意外にチャートというのはよく使うものでした。
私はChart.jsを使うことにしたのですが、情報が整理されておらず、辟易しそうでした。
公式ドキュメントにはなかったので、チャートの各オプションを、全て画像つきで解説させていただきました。
ネット上に分散していると、なかなか覚えられないタイプなので、今回からは備忘録的に、
深くまでChart.jsを触っていこうと思います。

(扱っている各グラフの情報のみ知りたい方は、ナビの、個別にグラフを見ていくから飛んで見てください)

Chart.jsとは

Simple yet flexible JavaScript charting for designers & developers
デザイナーとデベロッパーのためのシンプルで、柔軟なJavaScriptのチャート

http://www.chartjs.org/

インストール

GitHubから最新のコードを入手できます。現時点での最新バージョンは、2.7.2でした。面倒であれば、CDNで問題ありません。

私は、GitHubから、Chart.min.jsを選択肢、ダウンロードしました。

いざ、描画をする前に

Chart.jsを扱う上で、面倒なのが、チャート自体の種類の多さです。まずはそれを押さえてから、順次見て行きましょう。

  1. 線グラフ(Line)

    線グラフは、線上にデータ点をプロットする方法です。多くの場合、トレンドデータ、または2つのデータセットの比較を表示するために使用されます。

スクリーンショット 2018-03-09 20.06.45.png

  1. 棒グラフ(Bar)

    棒グラフは、データ値を縦棒で表示する方法を提供します。トレンドデータを表示するとか、複数のデータセットを並べて比較するときに使用されます。

  2. レーダーチャート(Radar)

    レーダーチャートは、複数のデータ点とそれらの間の変動を表示する方法です。
    これらは、2つ以上の異なるデータセットを比較する場合によく使用されます。

  3. ドーナツと円グラフ(Doughnut&Pie)

    円グラフ(パイチャート)とドーナツチャートは、おそらく最も一般的に使われるチャートです。 円は弧に分割され、各部分は対応するデータの比例値を示します。これらは、データ間の比率関係を示すのに優れています。

  4. 鶏頭図(Polar Area)

    鶏頭図(polar area chart)は円グラフと似ていますが、各弧の角度は同じです。弧の半径は値によって異なります。
    この形式のグラフは、円グラフと同様にデータを比較する際に便利というだけでなく、値の規模を比較したい場合に便利です。

  5. バブルチャート(Bubble)

    バブルチャートは、同時に3次元のデータを表示するために使用されます。バブルの位置は、最初の2つの次元および対応する水平および垂直軸によって決定されます。第3の次元は、個々のバブルのサイズによって表されます。

  6. 散布図(Scatter)

    散布図は、基本の線グラフに基づいています。x軸が線形軸に変更されたものです。散布図を使用するには、XプロパティとYプロパティを含むオブジェクトとしてデータを渡す必要があります。 次の例では、3点の散布図を作成しています。

  7. 面グラフ(Area)

    これについては、いまいち要領を得ないので、以降説明します。

Chart.jsの書き方

  1. Chart.jsはcanvas要素を取得し、そこに描画します。よって、まずはhtml内に canvas要素を、JavaScriptで取得できるように置きましょう。また、インストールした、Chart.jsを読み込んで置きます

    chart.html
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title></title>
      <script src="Chart.min.js"></script>
    </head>
    <body>
      <canvas id="ch"></canvas>
    </body>
    </html>
    
  2. JavaScriptからcanvas要素を取得し、Chartオブジェクトの第一引数として渡します。第二引数に、これから作成するチャートの情報を書き込んで行きます。

    chart.html
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title></title>
      <script src="Chart.min.js"></script>
    </head>
    <body>
      <canvas id="ch"></canvas>
      <script>
      var ctx = document.getElementById("ch").getContext("2d");
      var chart = new Chart(ctx, {});
      </script>
    </body>
    </html>
    
  3. 辞書のキーとして

    1. type(作成するチャートをどれにするか)
    2. data (データセット)
    3. options(チャートのオプション)

    を渡します。中でも、dataは、2種類のデータを持ちます。labelsとdatasetsです。

    chart.html
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title></title>
      <script src="Chart.min.js"></script>
    </head>
    <body>
      <canvas id="ch"></canvas>
      <script>
      var ctx = document.getElementById("ch").getContext("2d");
      var chart = new Chart(ctx, {
        type: "",
        data: {
          labels:[],
          datasets:[]
        },
        options: {}
      });
      </script>
    </body>
    </html>
    

個別にグラフを見ていく ⓵線グラフ

以下のようなデータを用意いたしました。

テストの実施月(月) 得点(点)
4 90
7 58
9 2
12 98
1 3
3 89

まず、ラベルとなる月は、dataに対し、

labels=[4,7,9,12,1,3]と渡します。ただ気をつけなければならないのは、datasetsです。

chart.html内
datasets:[{
    data:[90,58,2,98,3,89]
}]

と渡します。datasetsは一つとは限りません(その証拠に複数形ですね)。datasetsには、色の情報やボーダーなど他にも情報が載るのでこの形になっています。ということで、

line.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="Chart.min.js"></script>
</head>
<body>
  <canvas id="ch"></canvas>
  <script>
  var ctx = document.getElementById("ch").getContext("2d");
  var chart = new Chart(ctx, {
    type: 'line',
    data: {
      labels:[4,7,9,12,1,3],
      datasets : [{
        data:[90,58,2,98,3,89]
      }]
    },
    options: {}
  });
  </script>
</body>
</html>

すると、このように表示されるかと思います。

スクリーンショット 2018-03-09 20.06.45.png

こうして、夏休みと冬休みに全く勉強しない子供の、点数推移が表示できました。

datasetに何が渡せるか(プロパティ)

  1. label

    データセット全体を表すラベルをつけます。

    datasets : [{
      label: "テスト得点",
      data:[90,58,2,98,3,89]
    }]
    

    スクリーンショット 2018-03-09 20.17.48.png

  2. backgroundColor

    線の下の塗りつぶし色を指定します。

    datasets : [{
      backgroundColor: "darkorange",
      data:[90,58,2,98,3,89]
    }]
    

        スクリーンショット 2018-03-09 20.22.35.png

  3. borderColor

    ボーダーの色を指定します。

    datasets : [{
      borderColor: "green",
      data:[90,58,2,98,3,89]
    }]
    

    スクリーンショット 2018-03-09 20.24.21.png

  4. borderWidth

    ボーダーの幅を指定します。わかりにくかったので、3番で解説したborderColorを適用しました。

    datasets : [{
      borderWidth: 10,
      borderColor: "gold",
      data:[90,58,2,98,3,89]
    }]
    

    スクリーンショット 2018-03-09 20.26.09.png

  5. borderDash
    ボーダーを破線にします。指定の仕方は簡単で、奇数が実践の幅、偶数が空白の幅で、それを繰り返します。

    datasets : [{
      borderDash: [48,96,12,24],
      data:[90,58,2,98,3,89]
    }]
    

      スクリーンショット 2018-03-09 20.29.46.png

  6. borderDashOffset
    謎、また後日調査します。

  7. borderCapStyle
    謎、また後日調査します。

  8. borderJoinStyle
    謎、また後日調査します。

  9. cubicInterpolationMode
    キュービック補完モードと呼ばれるものです。離散的なデータを滑らかな曲線で描く上でのアルゴリズムを指定しているみたいです。defaultと、monotone(単調)の二種類が存在しますが、正直ごく一般的なデータであれば、その差異はわかりませんでした。

    datasets : [{
      cubicInterpolationMode: "default",
      data:[90,58,2,98,3,89]
    }]
    

    スクリーンショット 2018-03-09 20.39.57.png

    datasets : [{
      cubicInterpolationMode: "monotone",
      data:[90,58,2,98,3,89]
    }]
    

    スクリーンショット 2018-03-09 20.45.38.png

  10. lineTension
    曲線の張りを設定します。0が最大で、点と点を結ぶ線は直線になります。注意:cubicInterpolationModeがmonotoneの場合、このオプションは無視されます。

    datasets : [{
      lineTension: 0,
      data:[90,58,2,98,3,89]
    }]
    

    スクリーンショット 2018-03-09 20.48.41.png

  11. pointBackgroundColor
    点の色を指定します。

    datasets : [{
      pointBackgroundColor: "red",
      data:[90,58,2,98,3,89]
    }]
    

    スクリーンショット 2018-03-09 20.56.13.png

  12. pointBorderColor
    点のボーダーの色を指定します。

    datasets : [{
      pointBorderColor: "purple",
      data:[90,58,2,98,3,89]
    }]
    

    スクリーンショット 2018-03-09 20.57.12.png

  13. pointBorderWidth
    点のボーダー幅を指定します。わかりにくかったので、12番のpointBorderColorを用いました。

    datasets : [{
      pointBorderColor: "purple",
      pointBorderWidth: 3,
      data:[90,58,2,98,3,89]
    }]
    

    スクリーンショット 2018-03-09 20.59.34.png

  14. pointRadius
    点の半径を指定します。

    datasets : [{
      pointRadius: 10,
      data:[90,58,2,98,3,89]
    }]
    

    スクリーンショット 2018-03-09 21.04.31.png

  15. pointStyle
    点の種類を指定します。指定できるのは、以下の項目と画像です。

    1. circle(円)
    2. cross(プラス印)

      スクリーンショット 2018-03-09 21.10.52.png

    3. crossRot(罰点印)
          
      スクリーンショット 2018-03-09 21.14.20.png

    4. dash(紐)

      スクリーンショット 2018-03-09 21.17.22.png

    5. line(線)

      スクリーンショット 2018-03-09 21.18.08.png

    6. rect(四角形)

      スクリーンショット 2018-03-09 21.18.44.png

    7. rectRounded(角丸)
      スクリーンショット 2018-03-09 21.19.29.png

    8. rectRot(ひし形)
      スクリーンショット 2018-03-09 21.20.03.png

    9. star(星)
      スクリーンショット 2018-03-09 21.20.45.png

    10. triangle(三角形)

      スクリーンショット 2018-03-09 21.21.31.png

  16. pointHitRadius
    点の近くをホバーすると、詳細に情報が表示されますが、この当たり判定範囲を広げるものです。

    datasets : [{
      pointHitRadius: 100,
      data:[90,58,2,98,3,89]
    }]
    

    スクリーンショット 2018-03-09 21.23.20.png

  17. pointHoverBackgroundColor
    ホバー時の背景色です。

    datasets : [{
      pointHoverBackgroundColor: "darkorange",
      data:[90,58,2,98,3,89]
    }]
    

    スクリーンショット 2018-03-09 21.27.53.png

  18. pointHoverBorderColor

    datasets : [{
      pointHoverBorderColor: "yellow",
      data:[90,58,2,98,3,89]
    }]
    

    スクリーンショット 2018-03-09 21.32.02.png

  19. pointHoverBorderWidth
    ホバー時のボーダーの幅を指定します。

    datasets : [{
      pointHoverBorderWidth: 5,
      data:[90,58,2,98,3,89]
    }]
    

    スクリーンショット 2018-03-09 21.30.04.png

  20. pointHoverRadius
    ホバー時のボーダの半径を指定します。

    datasets : [{
      pointHoverRadius: 10,
      data:[90,58,2,98,3,89]
    }]
    

    スクリーンショット 2018-03-09 21.33.38.png

  21. showLine
    falseの場合、このデータセットの線は表示されません。

        datasets : [{
      showLine: false,
      data:[90,58,2,98,3,89]
    }]
    

    スクリーンショット 2018-03-09 21.35.43.png

  22. spanGaps
    データがない場所を補完し、線を引きます。この例に限り、データを少し変更しました。

    datasets : [{
      spanGaps: true,
      data:[90,58,,98,3,89]
    }]
    

    spanGapsがTrueの場合

    スクリーンショット 2018-03-09 21.38.23.png

    spanGapsがfalseの場合

    スクリーンショット 2018-03-09 21.40.15.png

  23. steppedLine
    階段グラフを使用します。booleanと、before,afterが指定できます。

    steppedLineがtrue
    スクリーンショット 2018-03-09 21.42.50.png

    steppedLineがbefore
    スクリーンショット 2018-03-09 21.43.41.png

    steppedLineがafter

    スクリーンショット 2018-03-09 21.44.05.png

参考

線グラフ · Chart.js 日本語ドキュメント

終わりに

今回は、導入方法、線グラフを扱いました。
次回は、棒グラフに関して扱いたいと思います。