もともとローカルな環境でCanvasJSを使用していたのですが、よくよく調べてみると商用利用は有償ってのを発見しまして、この度Chart.jsに乗りかえました。
CanvasJSを諦めようってなって、どのライブラリにしようかな～と悩んだのですが、コチラのサイトを参考に決めました。
基本的なグラフ作成のコードから、phpでfunctionにしておいて、グラフのデータを与えて使用するってのもご紹介しようと思います。
Chart.jsのグラフ作成の基本
まずは基本から！
cdn経由でjsの読み込み
Chart.jsを使うためのjsを読み込みます。
htmlのheadに入れておきましょう。
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
最新を使いたい方はcdnで確認しておきましょう
canvasを設置
次にhtmlにcanvasを設置します、設置したところに描画されます
<canvas id="chartJs"></canvas>
javascriptのコード
var ctx = document.getElementById('chartJs').getContext('2d');
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: ["月", "火", "水", "木", "金", "土", "日"],
datasets: [{
label: "はじめてのChart.js",
backgroundColor: 'rgb(129, 239, 226)',
borderColor: 'rgb(74, 224, 206)',
data: [0, 10, 5, 5, 15, 50, 35],
}]
},
options: {}
});
実際に描画してみるとこんな感じです。
javascriptの解説
type: 'line',
lineを指定すると、線グラフになります。
他にも以下のような種類があります、一部ご紹介
| type | グラフ種類 |
|---|---|
| line | 線グラフ |
| bar | 棒グラフ |
| radar | レーダーチャート |
| pie | 円グラフ |
| doughnut | ドーナツグラフ |
そのほかにもあるので、詳しくは公式を！
labels: ["月", "火", "水", "木", "金", "土", "日"],
ここでX軸に設定したい値を定義します
data: [0, 10, 5, 5, 15, 50, 35],
y軸も同様に。
backgroundColor: 'rgb(129, 239, 226)',
borderColor: 'rgb(74, 224, 206)',
グラフの背景と線の色を定義します。
label: "はじめてのChart.js",
グラフの凡例を定義します。
options: {}
今回は何も設定していませんが、グラフのサイズをレスポンシブにしたり、グラフタイトルの設定などを定義することができます。
↓の関数の方でご紹介
phpで関数にして呼び出す
描画したいデータなんて、通常は手入力なんてまあ出来ませんよね。
DBから取ってきたデータだったり、ロジック通って計算されたものだったり。
私は共通サブに定義しておいて、配列突っ込んで呼び出す形で使っていますので、ご参考までに。
（かなりダサいので、我こそはプログラマの方、突っ込みお願いします・・）
描画したいデータ
描画したい配列は以下のように、X軸をkeyに、y軸をvalueにして用意します。
以下は例で直接配列に手入力してますが、普通はselectしたデータとかを下記の形式で突っ込みます。
$graph_data = array(); $graph_data = ["月"=>0, "火"=>10, "水"=>5, "木"=>5, "金"=>15, "土"=>50, "日"=>35 ];
一応、配列の中身も
Array
(
[月] => 0
[火] => 10
[水] => 5
[木] => 5
[金] => 15
[土] => 50
[日] => 35
)
chart.js描画用の関数
/*
* 引数
* $type： グラフの型
* $uniq_id： canvasタグに設定するid
* $data： 描画したいグラフデータの配列
* $title： グラフのタイトル
*/
function ChartJs($type,$uniq_id,$data,$title){
//data作成
$x_axis = "";
$y_axis = "";
$i = 0;
foreach($data as $k=>$v){
if($i < 1){
$x_axis = "\"${k}\"";
$y_axis = "${v}";
}else{
$x_axis .= ", \"${k}\"";
$y_axis .= ", ${v}";
}
$i++;
}
print "<div class=\"chart-container\"><canvas id=\"${uniq_id}\"></canvas></div>
<script type=\"text/javascript\">
var ctx = document.getElementById('${uniq_id}').getContext('2d');
var chart = new Chart(ctx, {
type: '${type}',
data: {
labels: [${x_axis}],
datasets: [{
backgroundColor: 'rgb(129, 239, 226)',
borderColor: 'rgb(129, 239, 226)',
data: [${y_axis}],
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
legend: {
display: false
},
title: {
display: true,
text: '${title}'
}
}
});
</script>
";
}
こんな感じです。
補足
responsive: true,
maintainAspectRatio: false,
グラフがレスポンシブに描画されます、デフォルトでtrueになっているので、固定したい場合はfalseに。
ただ、ここで注意点と言いますか、縦横比を維持したままだとブラウザのサイズ次第ではグラフがすんごいちっちゃくなったり、逆にめっちゃデカくなったりしちゃいます。
なので、maintainAspectRatioをfalseに設定して縦横比を維持せず、heightを固定して、スマホとかブラウザが狭まっている時でも極端にならないようにする必要があります。
具体的には、canvasタグをdivタグで囲むようにして、そのdivにてサイズを設定
以下のような感じ
<div class="chart-container">
<canvas id="uniq_id"></canvas>
</div>
htmlの方は、私の場合は関数の24行目で記述しています
.chart-container {
width: 100%;
height: 400px;
position:relative;
}
ここで、注意点がありまして、公式にも記載がありますが、
- 親要素のdivの中にはcanvasしか入れてはいけません
- position:relativeにする必要があります
これでブラウザサイズに応じてキレイに表示できるはずです。
legend: {
display: false
},
凡例の表示設定、falseに設定しているので、表示されなくなります。
trueにして各種定義すれば、フォント、色、サイズなどを調整できます。
title: {
display: true,
text: '${title}'
}
グラフのタイトルをここで定義します
呼び出し
引数を与えて呼び出します
$type = "line"; $uniq_id = "A1"; $data = $graph_data; $title = "関数で描画してみる"; ChartJs($type,$uniq_id,$data,$title);
$uniq_idを変えれば、同一html上に何個も描画できます。
