Chart.js v2.0でシンプルなグラフを描画してみる [Canvas]

2016年4月19日　 HTML 便利ツール

Chart.js

概要

1 Chart.js v2.0
- 1.1 ライセンス
2 シンプルなグラフを描画してみる

Chart.js v2.0

HTML5のCanvas要素を利用してグラフが作れるJavascriptライブラリ。簡単な記述で高度なグラフが作ることが可能です。

v1.0と比べv2.0はオプションが増えてカスタマイズ性が上がったみたいです。v1.0とv2.0のオプション名や記述方法が変更されているので注意してください。v1.0のライブラリを読み込んでv2.0の記述をするとエラーになります。

公式サイト：Chart.js | Open source HTML5 Charts for your website

ライセンス

ライセンスは”MIT license”。商用利用、修正、配布などが許可されており、誰でも無償で無制限に扱って良い。著作権表示は必要で、作者または著作権者はなんら責任を負わない。

関連リンク：MIT License – Wikipedia

シンプルなグラフを描画してみる

ジャパンチームと日本チームの順位推移をグラフ化してみます。表計算ソフトでよく作るようなシンプルなグラフです。v1.0ではY軸の反転ができませんでしたが、v2.0では可能になっています。

1. 準備

GitHubからファイルをダウンロードします。解凍したファイルのdistフォルダにあるChart.min.jsをhead内に読み込みます。CDNも用意されているのでお好きな方を選んでください。

HTML

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

2. キャンバスの追加

body内にcanvas要素を記述します。この要素が描画範囲となります。ID, width, heightはお好きなように変更してください。

HTML

<canvas id="canvas" width="500" height="300"></canvas>

3. 設定

グラフにするデータと描画オプションを設定。コピペして色を変更したり、不要な箇所を削除したりしてみてください。

Javascript

var config = {
   type: 'line',
   data: {
       labels: ["2010", "2011", "2012", "2013", "2014", "2015", "2016"],
       datasets: [{
           label: "JAPAN",
           fill: false,
           backgroundColor: "#3A7AC9",
           borderWidth: 2,
           borderColor: "rgba(2,63,138,0.8)",
           pointBorderColor: "#fff",
           pointBackgroundColor: "rgba(2,63,138,0.8)",
           pointBorderWidth: 2,
           pointHoverRadius: 5,
           pointHoverBackgroundColor: "#1D5191",
           pointHoverBorderColor: "#fff",
           pointHoverBorderWidth: 2,
           tension: 0,
           data: [5, 7, 8, 3, 1, 4, 10]
       }, {
           label: "NIPPON",
           fill: false,
           backgroundColor: "#DB514E",
           borderWidth: 2,
           borderColor: "rgba(201,60,58,0.8)",
           pointBorderColor: "#fff",
           pointBackgroundColor: "rgba(201,60,58,0.8)",
           pointBorderWidth: 2,
           pointHoverRadius: 5,
           pointHoverBackgroundColor: "#9A1B19",
           pointHoverBorderColor: "#fff",
           pointHoverBorderWidth: 2,
           tension: 0,
           data: [1, 4, 4, 2, 6, 7, 3]
       }]
   },
   options: {
      responsive: true,
      scales: {
         xAxes: [{
            display: true,
            stacked: false,
            gridLines: {
               display: false
            }
         }],
         yAxes: [{
            display: true,
            scaleLabel: {
               display: true,
               labelString: '順位',
               fontFamily: 'monospace',
               fontSize: 14
            },
            ticks: {
               reverse: true,
               callback: function(value){
                  return value+'位';
               }
            }
         }]
      }
   }
};

datasets

fill: グラフの背景を描画するかどうか
point~: グラフの点関連
pointHover~: グラフの点にカーソルを合わせた時
tension: グラフの線の張り。数値が高ければ曲線になり、ゼロにすれば直線

options

xAxes: X軸のオプション
gridLines.display: メモリを描画するか
scaleLabel.display: ラベルを表示するか
ticks.reverse: メモリを反転するか (降順/昇順)

公式ドキュメント：http://www.chartjs.org/docs/

4. 実行

最後に描画を実行すると、グラフが表示されます。canvas要素を取得してグラフを生成しています。

Javascript

window.onload = function() {
   var ctx = document.getElementById("canvas").getContext("2d");
   window.myLine = new Chart(ctx, config);
};

サンプルコード

HTML

<!doctype html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <title>Chart.js v2.0</title>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.0.2/Chart.min.js"></script>
</head>
<body>
   <canvas id="canvas" width="500" height="300"></canvas>
   <script>
      var config = {
      type: 'line',
      data: {
          labels: ["2010", "2011", "2012", "2013", "2014", "2015", "2016"],
          datasets: [{
              label: "JAPAN",
              fill: false,
              backgroundColor: "#3A7AC9",
              borderWidth: 2,
              borderColor: "rgba(2,63,138,0.8)",
              pointBorderColor: "#fff",
              pointBackgroundColor: "rgba(2,63,138,0.8)",
              pointBorderWidth: 2,
              pointHoverRadius: 5,
              pointHoverBackgroundColor: "#1D5191",
              pointHoverBorderColor: "#fff",
              pointHoverBorderWidth: 2,
              tension: 0,
              data: [5, 7, 8, 3, 1, 4, 10]
          }, {
              label: "NIPPON",
              fill: false,
              backgroundColor: "#DB514E",
              borderWidth: 2,
              borderColor: "rgba(201,60,58,0.8)",
              pointBorderColor: "#fff",
              pointBackgroundColor: "rgba(201,60,58,0.8)",
              pointBorderWidth: 2,
              pointHoverRadius: 5,
              pointHoverBackgroundColor: "#9A1B19",
              pointHoverBorderColor: "#fff",
              pointHoverBorderWidth: 2,
              tension: 0,
              data: [1, 4, 4, 2, 6, 7, 3]
          }]
      },
      options: {
         responsive: true,
         scales: {
            xAxes: [{
               display: true,
               stacked: false,
               gridLines: {
                  display: false
               }
            }],
            yAxes: [{
               display: true,
               scaleLabel: {
                  display: true,
                  labelString: '順位',
                  fontFamily: 'monospace',
                  fontSize: 14
               },
               ticks: {
                  reverse: true,
                  callback: function(value){
                     return value+'位';
                  }
               }
            }]
         }
      }
   };
   window.onload = function() {
      var ctx = document.getElementById("canvas").getContext("2d");
      window.myLine = new Chart(ctx, config);
   };
   </script>
</body>
</html>

サンプル表示

いろいろなフォントを試しましたが、日本語は綺麗に表示されないようです。

WEB 関連記事