Edited at

chart.js入門

More than 3 years have passed since last update.

グラフ(折れ線グラフ、棒グラフ、レーダチャートなど)描画用のライブラリ。

※単にグラフを書きたいだけの人は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>



js


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>



js

$(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());
})