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

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

svgタグとは？
円グラフの画像をつくるHTML
円グラフの画像をつくるJavaScript
円グラフの大きさを変更する
円グラフにテキストを追加する
svgの線や塗などをcssでスタイルを変更する
HTMLのcanvasタグとJavaScriptで円グラフの画像をつくる

js関連記事

svgタグとは？

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

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

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

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

HTML

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

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

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

JavaScript

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

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

var startDegree = 0;
var finishDegree = 0;

var svg = document.getElementById('circle');
for (var i = 0; i < data.length; i++) {
  finishDegree = startDegree + 360 * data[i] / 100;
  var path = createFanShape(cx, cy, r, startDegree, finishDegree, colors[i]);
  svg.appendChild(path);
  var svgText = createPieChartText(cx, cy, r * 0.8, startDegree, finishDegree, data[i], 'num', i);
  svg.appendChild(svgText);

  startDegree = finishDegree;
}


function createFanShape(cx, cy, r, startDegree, finishDegree, backColor) {
  var startX = cx + r * Math.sin(startDegree / 180 * Math.PI);
  var startY = cy - r * Math.cos(startDegree / 180 * Math.PI);

  var finishX = cx + r * Math.sin(finishDegree / 180 * Math.PI);
  var finishY = cy - r * Math.cos(finishDegree / 180 * Math.PI);

  var largeArcFlag = (finishDegree - startDegree <= 180) ? 0 : 1;

  var move = 'M' + cx + ' ' + cy + ' ';
  var line = 'L' + startX + ' ' + startY + ' ';
  var arc = 'A' + r + ' ' + r + ' ' + 0 + ' ' + largeArcFlag + ' ' + 1 + ' ' + finishX + ' ' + finishY + ' ';
  var close = 'Z';

  //path要素を作成;
  var NS = 'http://www.w3.org/2000/svg';
  var path = document.createElementNS(NS, 'path');
  path.setAttributeNS(null, 'd', move + line + arc + close);
  path.setAttributeNS(null, 'fill', backColor);

  return path;
}

var svg = document.getElementById('circle');には、svgタグのidを指定します。

今回は４つのデータの円グラフを作りたいので、配列にパーセンテージなどを入れていきます。
dataにグラフのパーセンテージを合計が100％になるように入れます。
colorsには、円グラフの該当箇所の背景色をカラーコードで指定します。

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

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

HTML

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

JavaScript

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

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

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

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

JavaScript

function createPieChartText(cx, cy, r, startDegree, finishDegree, text, cls, i) {
  var degree = (startDegree + finishDegree) / 2;
  var textX = cx + r * Math.sin(degree / 180 * Math.PI);
  var textY = cy - r * Math.cos(degree / 180 * Math.PI);

  var NS = 'http://www.w3.org/2000/svg';
  var svgText = document.createElementNS(NS, 'text');
  svgText.textContent = text;
  svgText.setAttributeNS(null, 'x', textX);
  svgText.setAttributeNS(null, 'y', textY);
  svgText.setAttributeNS(null, 'class', cls + i);

  return svgText;
}

まずは、文字を生成するfunctionを追記します。

JavaScript

for (var i = 0; i < data.length; i++) {
  finishDegree = startDegree + 360 * data[i] / 100;
  var path = createFanShape(cx, cy, r, startDegree, finishDegree, colors[i]);
  svg.appendChild(path);
  var svgText = createPieChartText(cx, cy, r * 0.8, startDegree, finishDegree, data[i], 'num', i);
  svg.appendChild(svgText);

  startDegree = finishDegree;
}

for文を上のように変更し、テキストを追加するようにしています。
svgのtextの中には必要最低限のものだけを指定しています。classをそれぞれにつけているので、fillやstrokeなどはcssで指定します。
svgTextで、テキストを追加します。