HTMLのcanvasタグとJavaScriptで円グラフの画像をつくる

HTMLのcanvasタグとJavaScriptをつかって、canvasタグ内に円グラフの画像を作成してみます。
php/DBと連動することで、パーセンテージを変更できて円グラフも自動で変更が反映されるようにします。

canvasタグとは？
円グラフの画像をつくるHTML
円グラフの画像をつくるJavaScript
円グラフの大きさを変更する
円グラフにテキストを追加する
canvasで作成した画像がぼやける場合

jQuery関連記事

canvasタグとは？

サイト上で図形を表現するには、一般的にPNG/JPEG/GIFなどの画像で表現します。
今回使うcanvasタグでは、図形を描くことができます。

canvasタグを使用することで、HTMLとJavaScriptだけで、グラフなどの図形をすばやく表示できるようになります。

See the Pen
Untitled by むぅ (@mugenweb)
on CodePen.0

円グラフの画像をつくるHTML

HTML

<canvas id="circle" width="190" height="190"></canvas>

HTMLはこれだけです。JavaScriptを使うのでidを指定し、canvasのwidth、heightをそれぞれ指定します。

円グラフの画像をつくるJavaScript

JavaScript

var element = document.getElementById("circle");
var context = element.getContext("2d");

var data = [55, 20, 16, 9];
var colors = ["#EAA1A5", "#D37677", "#C95C5C", "#B34940"];
var total = 0;

var cx = 95; //中心点のx座標;
var cy = 95; //中心点のy座標;
var r = 95; //半径;

for (i = 0; i < data.length; i++) {
  context.beginPath();
  num = 360 * (data[i] / 100);

  context.arc(cx, cy, r, (total - 90) * Math.PI / 180, ((total + num) - 90) * Math.PI / 180, false);

  context.lineTo(cx, cy);

  context.lineTo(95, 95);
  context.fillStyle = colors[i];
  context.fill();
  total = total + num;
}

var element = document.getElementById("circle");には、canvasタグのidを指定します。
var context = element.getContext("2d");は、平面図形を描くときに必要なのでこのまま指定します。

今回は４つのデータの円グラフを作りたいので、配列にパーセンテージなどを入れていきます。
dataにグラフのパーセンテージを合計が100％になるように入れます。
ここをphpから出力するようにするとシステムから画像が変えられます。

colorsには、円グラフの該当箇所の背景色をカラーコードで指定します。

これだけで、canvasタグに円グラフを描くことができます。
dataの配列に値を追加することで4つ以上も指定できます。

円グラフの大きさを変更する

HTML

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

JavaScript

var cx = 95; //中心点のx座標;
var cy = 95; //中心点のy座標;
var r = 95; //半径;

今回は300pxの円グラフに変更します。
その場合、cxと、cyの95の数値を半径の値に変更します。
また、svgタグは直径の値に変更します。

それだけで円グラフの大きさを変更できます。

円グラフにテキストを追加する

JavaScript

context.font = 'bold 23px Yu Gothic Medium';
context.fillStyle = 'rgba(50, 51, 51)';
context.fillText('51', 125, 120);
context.fillText('24', 35, 150);
context.fillText('16', 20, 85);

context.fontで、文字のフォントや大きさなどを指定し
context.fillStyleで文字色を指定します。
それらの設定を反映し、context.fillTextで座標を指定し、テキストを追加します。

それぞれの文字でフォントなどの変更は必要なく、上記のような記述をすることで「51」、「24」、「16」が同じフォントで追加されます。

また、フォントなどを変えたい場合は、改めてcontext.fontなどで指定しなおすこともできます。