Help us understand the problem. What is going on with this article?

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());
})
kazu56
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした