chart.js入門 #chart.js

グラフ（折れ線グラフ、棒グラフ、レーダチャートなど）描画用のライブラリ。
※単にグラフを書きたいだけの人はD3.jsより簡単なのでお勧め。

ファイルダウンロード先/公式ドキュメント

ダウンロード先：http://www.chartjs.org
ドキュメント：http://www.chartjs.org/docs

使い方

canvasを用意して、Chart.jsへグラフの情報（lineChartData）とグラフ全体のオプション（option）を渡して描画する。

下記の例は折れ線グラフ。ChartオブジェクトのBarメソッドを実行すれば棒グラフになるし、Radarメソッドを実行すればレーダーチャートになる。

html

<!--ライブラリ読み込み -->
<script src="js/Chart.min.js"></script>

<!--描画箇所 -->
<canvas id="lineChartCanvas" height="450" width="600"></canvas>

<!--凡例箇所 -->
<ul id="chart_legend"></ul>


var lineChartData = {
  //x軸の情報
  labels : ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
  //各グラフの情報。複数渡すことができる。
  datasets : [
    {
      //rgba(220, 220, 220, 1)は、rgbと透過度。

      //線の色。ポイントの色を省略すると線の色と同じになる。
      strokeColor : "rgba(220, 220, 220, 1)",      
      //線の下側の色
      fillColor : "rgba(220, 220, 220, 0.5)",
      //ポイントの色
      pointColor : "rgba(220, 220, 220, 1)",
      //ポイントの枠の色
      pointStrokeColor : "rgba(220, 220, 220, 1)",
      //実際のデータ
      data : [1, 59, 90, 81, 56, 55, 40, 30, 10, 40, 48, 58],
      //凡例名
      'label'=>'data1'
    },
    {
      fillColor : "rgba(151, 187, 205, 0.5)",
      strokeColor : "rgba(151, 187, 205, 1)",
      pointColor : "rgba(151, 187, 205, 1)",
      pointStrokeColor : "#fff",
      data : [28, 48, 40, 19, 96, 27, 100, 33, 63, 31, 64, 51],
      'label'=>'data2'
    }
  ]
}

var option = {
  //縦軸の目盛りの上書き許可。これ設定しないとscale関連の設定が有効にならないので注意。
  scaleOverride : true,

  //以下設定で、縦軸のレンジは、最小値0から5区切りで35(0+5*7)までになる。
  //縦軸の区切りの数
  scaleSteps : 7,
  //縦軸の目盛り区切りの間隔
  scaleStepWidth : 5,
  //縦軸の目盛りの最小値
  scaleStartValue : 0,

  //アニメーション設定
  animation : false,

  //Y軸の表記（単位など）
  scaleLabel : "<%=value%>A",

  //ツールチップ表示設定
  showTooltips: false,

  //ドットの表示設定
  pointDot : false,

  //線を曲線にするかどうか。falseで折れ線になる。
  bezierCurve : false

  //凡例
  legendTemplate : "<% for (var i=0; i<datasets.length; i++){%><span style=\"background-color:<%=datasets[i].strokeColor%>\">&nbsp;&nbsp;&nbsp;</span>&nbsp;<%if(datasets[i].label){%><%=datasets[i].label%><%}%><br><%}%>"
}

//jQueryオブジェクト[0]とすれば、getContext("2D")できる。
var ctx = $('#lineChartCanvas')[0].getContext("2d");
//グラフ描画
var char = new Chart(ctx).Line(lineChartData,option);
//凡例のhtmlを取得して設定
$('#chart_legend').html(chart.generateLegend());

オプション

公式ドキュメントや[JavaScript] Chart.js を使って線グラフを描画するやグラフ描画ライブラリ Chart.js で凡例を表示するあたりを参考にする。

サーバ側からのデータの受け渡しを含めた書き方

サーバ側とクライアント側どちらで何をやるかは検討必要。

サーバサイド側

サーバサイドはCakePHPで書いている。

$list = $this->Model->find('all');
//取得した値を配列に変換する。　[1, 59, 90, 81, 56, 55, 40, 30, 10, 40, 48, 58]
$list = Hash::extract($list,'{n}.Model.value');

//X軸の表記作成 ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
for($i=1;$i<13;$i++){
  $labels[] = $i . '月';
}

$line_data = [
  'labels' => $labels,//X軸の表記
  'datasets' => [
    [
      'fillColor' => "rgba(220, 220, 220, 0.5)",
      'strokeColor' => "rgba(220, 220, 220, 1)",
      'pointColor' => "rgba(220, 220, 220, 1)",
      'pointStrokeColor' => "#fff",
      'data' => $list,//データ
      'label'=>'data1'//凡例
    ],
  ]
];

$line_data = json_encode($line_data);
$this->set(compact('line_data'));

クライアント側

html

<!-- data属性でデータの受け渡しを行う。-->
<!-- jQueryのdataで取得すると、jsonからオブジェクトに変換されるので扱いやすいため。 -->
<canvas id="lineChartCanvas" height="450" width="900" data-line_data='<?php echo $line_data?>'></canvas>

<!--凡例箇所 -->
<ul id="chart_legend"></ul>

$(function(){
  //データの取得
  var lineChartData = $('#lineChartCanvas').data('line_data');

  //オプションの設定
  var option = {
    //縦軸の目盛りの上書き許可。これ設定しないとscale関連の設定が有効にならないので注意。
    scaleOverride : true,

    //以下設定で、縦軸のレンジは、最小値0から5区切りで35(0+5*7)までになる。
    //縦軸の区切りの数
    scaleSteps : 15,
    //縦軸の目盛り区切りの間隔
    scaleStepWidth : 1,
    //縦軸の目盛りの最小値
    scaleStartValue : 50,

    //アニメーション設定
    animation : false,

    //Y軸の表記（単位など）
    scaleLabel : "<%=value%>%",

    //ツールチップ表示設定
    showTooltips: false,

    //ドットの表示設定
    pointDot : false,

    //線を曲線にするかどうか。falseで折れ線になる。
    bezierCurve : false

  //凡例
  legendTemplate : "<% for (var i=0; i<datasets.length; i++){%><span style=\"background-color:<%=datasets[i].strokeColor%>\">&nbsp;&nbsp;&nbsp;</span>&nbsp;<%if(datasets[i].label){%><%=datasets[i].label%><%}%><br><%}%>"
  }

  var ctx = $('#lineChartCanvas')[0].getContext("2d");
  var chart = new Chart(ctx).Line(lineChartData,option);
  $('#chart_legend').html(chart.generateLegend());
})